Open Flash Chart 之线图
天公司要求开发一个曲线图，简单看了一下之前公司的一个系统，发现一个曲线图效果还不错，查了一下叫OpenFlashChart，还是很不错的，很多人用。研究了一下，发现还不错，特地写了个DEMO测试下。
public ActionResult ITooltip()
{
int DateLen = Convert.ToInt32(Request["d"]);
int DateMode = Convert.ToInt32(Request["m"]); OpenFlashChart.OpenFlashChart chart = new OpenFlashChart.OpenFlashChart();
List<double> ListData = new List<double>(); //定义一条X轴
XAxisLabels xal = new XAxisLabels();
for (int i = DateLen; i >= 0; i--)
{
string aDateID = DateTime.Now.AddDays(-i).ToString("yyyyMMdd");
int count = i * 10;
ListData.Add(count);
//X轴的显示信息
AxisLabel al = new AxisLabel(DateTime.Now.AddDays(-i).ToString("MM月dd日"));
xal.Add(al);
} //定义一条曲线，该曲线就是用于显示数据的曲线
OpenFlashChart.LineHollow line = new LineHollow(); //此处是new LineHollow() 表示是空心点，如果要实心点，可以new LineDot()
line.Values = ListData; //将数据给曲线
//line.HaloSize = 12;
line.Width = 6; //图中曲线的粗细
line.DotSize = 12;
line.FontSize = 12; //该参数控制 line.Text的字体大小
line.Colour = "#0838CE"; //设置曲线的颜色 ////自定义一个曲线中点的样式
//DotStyle ds = new DotStyle();
//ds.BackgroundColour = "#000000"; //自定义点的背景颜色
//ds.Colour = "#ffffff"; //自定义点的颜色
//ds.DotSize = 6; //自定义点的大小
//ds.IsHollow = true; //是否是空心
//ds.Sides = 333;
//ds.Tip = "评论数 #val#"; //鼠标移到点上的提示信息
//ds.Width = 20;
//line.DotStyleType = ds; line.Text = "评论数";
line.Loop = true;
line.Tooltip = "评论数 #val#"; chart.AddElement(line);
chart.Title = new Title("最近30天评论趋势曲线图");
//设置整个图表的显示范围，也就是说
//图表中，Y轴的最小值为表中数据的最小值减10.
//图表中，Y轴的最大值为表中数据的最大值加10，
//第三个参数用于设计后背景方格的密集程度，方格中每一格表示的高度为Y轴的10
chart.Y_Axis.SetRange(ListData.Min() - 10, ListData.Max() + 10, (Convert.ToInt32(ListData.Max()+10)) / 10); chart.X_Axis.Labels = xal;
//chart.X_Axis.Set3D(12); //设置X轴的3D效果，还是挺好看的
chart.Tooltip = new ToolTip("my tip #val#"); //这4行代码还是要的，清空缓存
Response.Clear();
Response.CacheControl = "no-cache";
Response.Write(chart.ToPrettyString());
Response.End(); return View();
}
其中前台页面代码如下：
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
<script type="text/javascript" src="/FlashChart/swfobject.js"></script>
<br />
<div id="week_Tooltip" style="margin-bottom: 20px;">
</div>
<div id="month_Tooltip">
</div>
<script type="text/javascript">
swfobject.embedSWF("/FlashChart/open-flash-chart-SimplifiedChinese.swf", "week_Tooltip", "700px", "400px", "9.0.0", "expressInstall.swf", { "data-file": "/Chart/ITooltip?d=7&m=0" });
</script>
</div>
</body>
</html>
显示效果如下：
|
元素/属性 |
形状或作用 |
参数1 |
|
title |
显示图表主题（最上方） |
主题名称 |
|
x_legend |
X坐标说明（最下方, 与X轴平行） |
说明信息 |
|
y_legend |
Y坐标说明（最左边, 与Y轴平行） |
说明信息 |
|
x_labels |
设置X轴坐标显示 |
|
|
y_label_size |
||
|
x_label_style |
设置X轴样式 |
字体大小 |
|
y_label_style |
设置Y轴样式 |
字体大小 |
|
x_ticks |
控制X轴坐标标记显示 |
X轴坐标标记长度 |
|
y_ticks |
控制Y轴坐标标记显示 |
Y轴坐标标记最小长度 |
|
X_min |
设置X轴坐标最小值 |
X轴坐标最小值 |
|
x_max |
设置X轴坐标最大值 |
X轴坐标最大值 |
|
y_min |
设置Y轴坐标最小值 |
Y轴坐标最小值 |
|
y_max |
设置Y轴坐标最大值 |
Y轴坐标最大值 |
|
bg_colour |
设置背景颜色 |
|
|
inner_background |
设置坐标区域内部颜色 |
颜色1 |
|
bg_image |
设置背景图片 |
图片位置 |
|
bg_image_x |
设置图片横向位置 |
[left |center |right] |
|
bg_bg_image_y |
设置图片纵向位置 |
[top |middle |bottom] |
|
x_axis_colour |
设置X轴颜色 |
|
|
y_axis_colour |
设置Y轴颜色 |
|
|
x_axis_steps |
设置X轴线条间隔 |
|
|
x_axis_3d |
设置X轴3d效果的高度 |
|
|
x_grid_colour |
设置X轴线条颜色 |
|
|
y_grid_colour |
设置Y轴线条颜色 |
|
|
show_y2 |
设置Y轴右边也显示坐标 |
[true |false] |
|
y2_lines |
设置哪个图是根据右边Y坐标的值来显示 |
[可以有多个] |
|
y_format |
格式化Y轴显示(常与#val#等联合使用) |
|
|
values |
设置值 |
|
|
num_decimals |
格式化小数位数 |
|
|
is_fixed_num_decimals_forced |
是否强制格式化小数 |
[true |false] |
|
is_decimal_separator_comma |
是否使用小数分隔符 |
[true: , |false: . ](与千位分隔符相反) |
|
is_thousand_separator_disabled |
是否使用千位分隔符 |
[true |false] |
|
x_offset |
是否自动补偿以适应图的显示 |
[true |false] |
关于toolTip
在chart中有一个参数为tool_tip，起到title的作用。这个参数的值的格式和其他的参数不一样。如下例中：
so.addVariable("tool_tip","#key#\nhigh:#high#\nlow:#low#\nclost:#close#");
tool_tip的参数值中#...#这个格式是起替换的作用。比如： #x_label#代表鼠标所在列的X轴文案。 #val#代表了鼠标所在区域的值。 #key#代表了鼠标所在区域，此种点，线和主体的文案。 #high#表示鼠标所在区域最高值。 #low#表示鼠标所在区域最低值。 #clost#表示鼠标所在区域关闭值。 #open#表示鼠标所在区域开始值。
2013-05-13 今天将之前的学习测试代码直接添加到项目中，结果生成的线图多了一条线，然后改了一下这个属性就正常了。
line.Loop = false; 字面意思理解是线图是否环绕起来。
Open Flash Chart 之线图的更多相关文章
- Open Flash Chart 之线图(二)
上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置.今天再来补充一下. 一.显示Open Flash Chart图表 Open Flash Chart 前 ...
- 关于k Line Chart (k线图)
K Line Chart python实现k线图的代码,之前找过matplotlib中文文档但是画k线图的finance方法已经弃用了.所以自己在网上搜寻一下加上改编,很好的实现出k线图, 代码如下: ...
- Wijmo金融图表系列之平均K线图&砖形图
2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...
- Highcharts candlestick(K线图)案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5实现饼图和线图-我们到底能走多远系列（34）
我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 礼仪规范 再到赚取世间的名声 财富 地位 ...
- 推荐几款web站点JS(JQeury)图表(饼图，柱图，线图)
一 Google Chart Tools 官网:https://developers.google.com/chart/ 谷歌图表工具提供了一个完美的方式形象化您的网站上的数据.从简单到复杂的层次结构 ...
- Open Flash Chart在php中的使用教程
http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 为了画一个漂亮的表格,我从网上找到了OpenFlashChart(of ...
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...
- html5实现饼图和线图
html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- ORACLE11G内存管理参数
今天,对ORACLE11G的几个内存参数看了一下,记录如下,大家可以参考: 1.首先,在ORACLE11G的INIT.ORA里,有“__”开头的参数,也就是以两个下划线开头的参数,这种参数应该是系统自 ...
- linux 日志编程（总结）
转自:http://blog.csdn.net/hemmanhui/article/details/4343844 日志主要涉及3个函数,分别是openlog.syslog和closelog函数.表8 ...
- 浅谈musql中using的使用---高性能(三)
转载地址:https://blog.csdn.net/lppl010_/article/details/79429657 mysql中using的用法为: using()用于两张表的join查询,要求 ...
- POJ 2251 bfs
DESCRIPTION:给你一个三维的迷宫.问你是否能从起点走到终点.如果能,输出最小步数.对我来说难得就是我没有想到怎么把他给你的三维图转换成map.恩..好像解题报告上说.只要是这种的最短路都要用 ...
- 51nod1671
题解: 这一题感觉和noip2015d2t3一模一样,而且是弱化版 但是,后来发现貌似每两个点都可以建立虫洞 好在是i和i+1有边,所以就直接用二分+贪心了 代码: #include<bits/ ...
- Linux内核分析-使用gdb跟踪调试内核从start_kernel到init进程启动
姓名:江军 ID:fuchen1994 实验日期:2016.3.13 实验指导 使用实验楼的虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-3.18.6/a ...
- oracle索引原理
B-TREE索引(二叉树索引,默认情况下,我们建的索引都是此种类型) 一个B树索引只有一个根节点,它实际就是位于树的最顶端的分支节点.可以用下图一来描述B树索引的结构.其中,B表示分支节点,而L表示叶 ...
- UITableViewCell的高度与UILabel自适应
UITableViewCell内部只放了一个UILabel,Cell的高度随着UILabel内容的高度变化而变化,可重写UITableView的委托方法动态调整高度,还要设置UILabel.numbe ...
- Qt 获取组合键 键盘按住某键 鼠标组合实现
#include "mainwindow.h" #include <QDebug> #include <QKeyEvent> #include <QM ...
- proxool配置及测试（数据库用的MySQL）
Proxool连接池设置 Proxool连接池是sourceforge下的一个开源项目,这个项目提供一个健壮.易用的连接池,最为关键的是这个连接池提供监控的功能,方便易用,便于发现连接泄漏的情况. ...