天公司要求开发一个曲线图，简单看了一下之前公司的一个系统，发现一个曲线图效果还不错，查了一下叫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. 【转】ASP.NET Core API 版本控制

    几天前,我和我的朋友们使用 ASP.NET Core 开发了一个API ,使用的是GET方式,将一些数据返回到客户端 APP.我们在前端进行了分页,意味着我们将所有数据发送给客户端,然后进行一些dat ...

  2. spring cloud学习(五)断路器 Hystrix

    断路器 Hystrix 断路器模式 (云计算设计模式) 断路器模式源于Martin Fowler的Circuit Breaker一文. 在分布式环境中,其中的应用程序执行访问远程资源和服务的操作,有可 ...

  3. HDU 2767 Proving Equivalences （Tarjan）

    Proving Equivalences Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other ...

  4. Superset 制作图表

    参考资料: http://lxw1234.com/archives/2018/03/904.htm https://wenku.baidu.com/view/49ffdf8b77eeaeaad1f34 ...

  5. Double H5.0

    Alpha阶段 - 博客链接合集 项目Github地址 Github 敏捷冲刺日志 Alpha冲刺! Day1 - 磨刀 Alpha冲刺! Day2 - 砍柴 Alpha冲刺! Day3 - 砍柴 A ...

  6. C++中的数据存储方式自动存储、静态存储和动态存储

    C++中变量存储方式有三种,自动存储,静态存储,动态存储 自动存储简单意义上就是在函数内不用任何关键字直接定义的变量,它在函数被调用时被创建,在函数退出时自动消失, 静态存储顾名思义就是在程序的整个运 ...

  7. 【笔记】《深入浅出MFC》第5章 总观Application Framework

    凝聚性强.组织化强的类库就是Application Framework.一组合作无间的对象,彼此藉消息的流动而沟通,并且互相调用对方的函数以求完成任务,这就是Application Framework ...

  8. C语言编程的环境以及架构

    c程序的使用步骤:

  9. TV-B-Gone Kit - Universal v1.2

  10. FTP 主动模式 与被动模式

    今天在被电信运营商给的没有内网ip被nat后的内网ip访问我的ftp服务器时出现了,连接被关闭的错误,经过多番查询发现问题原因是因为NAT内网ip没有被有效地转换为外网ip,也即是说NAT对ftp协议 ...