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

    方法一:实现Comparable接口 package com.java.test; public class Person implements Comparable<Person> { ...

  2. hulu

    一. 一开始因为没收到含有共享文档链接的邮件,所以简单自我介绍,聊了几句项目.问了: 1. 玩嗨如果数据库结构变化要怎么办 2. 哈佛项目是否为官方渠道 一直没收到邮件,面试官读网址给我,进到共享文档 ...

  3. Idea破解办法+idea免费生成注册码+jsp属性选择器+注解什么的都报错

    Idea破解办法: http://blog.csdn.net/bitcarmanlee/article/details/54951589 idea免费生成注册码: http://idea.iteblo ...

  4. js 数组复制问题

    师兄面试回来问个问题,js中数组怎么复制,工作中没遇到,面试也涨见识 了,他给我说了下,太晚没留心,打早起来研究下,写个dom,来看下 代码如下 <!doctype html> <h ...

  5. Webserivce简单安全验证

    最近新接了一个需要调用第三方WebService的项目,看到这个第三方WebService被调用的时候,需要授权用户名和密码,于是自己也想对WebService的安全授权这个方面进行了一下研究,以前调 ...

  6. python 虚拟环境 pyenv

    一.pyenv简介 pyenv 主要用来管理 Python 的版本,比如一个项目需要 Python 2.x ,一个项目需要 Python 3.x . pyenv 通过系统修改环境变量来实现 Pytho ...

  7. MyEclipse 2017 CI 9 发布（附下载）

    挑战全年最低价!MyEclipse线上狂欢继续!火热开启中>> 在进入年底之时,2017 CI 9是我们最大的版本发布之一.在新版本中,我们添加了对Angular 5和TypeScript ...

  8. <NET CLR via c# 第4版> 读书笔记--目录

    <NET CLR via c# 第4版>个别章节虽读过多次,但始终没有完整读过这本书.即使看过的那些,时间一长,也忘记了大部分.趁着最近不忙,想把这本书好好读一遍,顺便记下笔记,方便随时查 ...

  9. vee-validate 中文配置报错及自定义规则 报错.updateDictionary/.addlocale is not a function

    原因由于vee-validate版本更新的问题导致的. 1. 原因分析: a 新版vee-validate的语言配置方法变化了, Validator.localize('zh_CN', zh_CN) ...

  10. Android AES 加密、解密

    AES加密介绍 ASE 加密.解密的关键在于秘钥.只有使用加密时使用的秘钥,才可以解密. 生成秘钥的代码网上一大堆,下面的代码可生成一个秘钥 private SecretKey generateKey ...