Open Flash Chart 之线图

时间 2019-11-24

标签 open flash chart 线图栏目 Flash 繁體版

原文原文链接

天公司要求开发一个曲线图，简单看了一下以前公司的一个系统，发现一个曲线图效果还不错，查了一下叫OpenFlashChart，仍是很不错的，不少人用。研究了一下，发现还不错，特意写了个DEMO测试下。javascript

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

<html> <head> <title>Index</title> </head> <body> <div> <script type="text/javascript" src="/FlashChart/swfobject.js"></script> <br /> &nbsp;&nbsp;&nbsp;&nbsp;<div id="week_Tooltip" style="margin-bottom: 20px;"> </div> &nbsp;&nbsp;&nbsp;&nbsp;<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>

　　显示效果以下：java

元素/属性express	形状或做用缓存	参数1ide
titleoop	显示图表主题（最上方）学习	主题名称测试
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;　字面意思理解是线图是否环绕起来。