天公司要求开发一个曲线图，简单看了一下之前公司的一个系统，发现一个曲线图效果还不错，查了一下叫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 />

        &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>
 

　　显示效果如下：

　　

元素/属性

形状或作用

参数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 之线图的更多相关文章

  1. Open Flash Chart 之线图(二)

    上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置.今天再来补充一下. 一.显示Open Flash Chart图表 Open Flash Chart 前 ...

  2. 关于k Line Chart (k线图)

    K Line Chart python实现k线图的代码,之前找过matplotlib中文文档但是画k线图的finance方法已经弃用了.所以自己在网上搜寻一下加上改编,很好的实现出k线图, 代码如下: ...

  3. Wijmo金融图表系列之平均K线图&砖形图

    2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...

  4. Highcharts candlestick(K线图)案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html5实现饼图和线图-我们到底能走多远系列（34）

    我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 礼仪规范     再到赚取世间的名声 财富 地位    ...

  6. 推荐几款web站点JS(JQeury)图表(饼图，柱图，线图)

    一 Google Chart Tools 官网:https://developers.google.com/chart/ 谷歌图表工具提供了一个完美的方式形象化您的网站上的数据.从简单到复杂的层次结构 ...

  7. Open Flash Chart在php中的使用教程

    http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 为了画一个漂亮的表格,我从网上找到了OpenFlashChart(of ...

  8. 使用Open Flash Chart(OFC)制作图表(Struts2处理)

    Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...

  9. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

随机推荐

  1. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...

  2. POJ 2263 最短路Floyd_warshall算法

    灰常开心的用Floyd变形写出来了.额.对米来说还是牺牲了一定的脑细胞的.然而.我发现.大牛们还可以神奇的用Kruskal求最大生成树的最小权值来写.也可以用Dijkatra变形来写.T_T....5 ...

  3. jsonp 使用选择器

    使用选择器语法来查找和操作元素 使用类似于css和jquery的语法来查找和操作元素 可以使用Element.select(String selector) 和 Elements.select(Str ...

  4. Jboss7 部署EJB3 简明教程

    什么是EJB? EJB 是 Java 企业Bean, 是JavaEE服务端 企业组件模型,它的设计目标与核心应用是部署分布式应用程序.话不多说,直接看如何在本机部署EJB3.   部署环境: 操作系统 ...

  5. docker 部署 flask（一）配置环境及测试

    简介: flask也是要部署的.不能老在我们的pycharm里面跑测试服务器. 各种配置linux,我看就算了吧.我们用docker部署. 也就两三行命令. 一:选择基础镜像 GitHub repo: ...

  6. 福大软工 1816：项目UML设计（团队作业三）

    项目UML设计(团队) 团队信息 团队名:第三视角 各成员学号及姓名 姓名 学号 博客链接 张扬(组长) 031602345 http://www.cnblogs.com/sxZhangYang/p/ ...

  7. 用MyEclipse JPA创建项目（四）

    MyEclipse 3.15 Style——在线购买低至75折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于PA的功能. 阅读本教程时,了解J ...

  8. oracle获取执行计划及优缺点 详解

    一.获取执行计划的6种方法(详细步骤已经在每个例子的开头注释部分说明了):1. explain plan for获取: 2. set autotrace on : 3. statistics_leve ...

  9. Python与系统的交互方式

    本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell ...

  10. React Native笔记整理

    判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...