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

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. ArrayList与List<T>笔记

    ArrayList与List<T>笔记 ArrayList是在System.Collections命名空间的一个类, 通过Add的方法添加一个项, 当进到这个类的元数据时, 可以看到这个方 ...

  3. java中数组是不是对象？

    [转自知乎]:http://www.zhihu.com/question/26297216 JAVA中的数组是对象吗? public class test { public static void m ...

  4. Django（四）模板文件中的循环

    编辑views.py from django.shortcuts import render from django.shortcuts import HttpResponse #此行增加 # Cre ...

  5. Arithmometer: A Node.js implementation

    Foreword: This project is a part of pair programming task. We implement an command-line based arithm ...

  6. JDBCTemplate使用

    业务上,手机App(离线状态下的数据),在在线的时候需要往服务端上传,由于App上的SQLite数据库里的需要 同步数据的表 跟服务端的数据库表结构一致,所以为了同步数据的方便性,我们决定App在进行 ...

  7. jquery offset(),

    offset() 一.语法 1. 返回偏移坐标 $(selector).offset(); top: $(selector).offset().top; left: $(selector).offse ...

  8. ASIHTTPRequest类库简介和使用说明(转）

    ASIHTTPRequest类库简介和使用说明 官方网站: http://allseeing-i.com/ASIHTTPRequest/ .可以从上面下载到最新源码,以及获取到相关的资料. 使用iOS ...

  9. Linux kernel 不输出log信息

    /********************************************************************************* * Linux kernel 不输 ...

  10. caffe测试mnist问题-error while loading shared libraries

    问题描述 build/examples/mnist/convert_mnist_data.bin: error while loading shared libraries: libcudart.so ...