天公司要求开发一个曲线图，简单看了一下之前公司的一个系统，发现一个曲线图效果还不错，查了一下叫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. C语言按行读文件及字符串分割

    #include<stdio.h> #include<iostream> using namespace std; int main() { char s[50]; char ...

  2. SSH 远程端口转发

    既然"本地端口转发"是指绑定本地端口的转发,那么"远程端口转发"(remote forwarding)当然是指绑定远程端口的转发. 还是接着看上面那个例子,ho ...

  3. css实现椭圆

    先实现个简单点的,用css实现一个圆,ok,直接上代码: .circle{ width: 100px; height:100px; background: red; border-radius: 50 ...

  4. 转mysql半主从同步

    MySQL半同步复制 从MySQL5.5开始,MySQL以插件的形式支持半同步复制.如何理解半同步呢?首先我们来看看异步,全同步的概念   异步复制(Asynchronous replication) ...

  5. CodeIgniter $this->db->where()的自定义语句写法问题

    .自定义字符串:你可以手动的编写子句:$where = "name='Joe' AND status='boss' OR status='active'"; $this->d ...

  6. C++中的接口继承和实现继承

    很多人认为,C++中是不存在接口继承的,只有Java.C#这类语言才提供了相应的语法支持. 但是,如同鲁迅说过的某句名言:世上本没有接口继承,用的人多了,才有了接口继承.C++中依然可以实现接口继承, ...

  7. Linux->卸载Mysql方法总结

    如何在Linux下卸载MySQL数据库呢? 下面总结.整理了一下Linux平台下卸载MySQL的方法. MySQL的安装主要有三种方式:二进制包安装(Using Generic Binaries).R ...

  8. Python decode和encody

    s = "我今天非常的困" bs = s.encode("utf-8")# 把字符串转化成utf-8格式bytes # bytes 不是给人看的, 给机器用的 ...

  9. OC基础:内存(内存管理) 分类： ios学习 OC 2015-06-25 16:50 73人阅读 评论(0) 收藏

    自动释放池: @autoreleasepool { } 内存管理机制       谁污染,谁治理 垃圾回收机制:gc(Garbage collection),由系统管理内存,开发人员不需要管理. OC ...

  10. HDU 4585

    http://acm.hdu.edu.cn/showproblem.php?pid=4585 从原来的人中找出战斗数值最接近的,输出他们两人的序号 要在logn的复杂度完成查找,我用的是set,当然用 ...