最近有一个小项目需要用到折线图。到处请教了一下，有人给我推荐了highcharts。感觉还不错，就稍微学习下。这里记录一下学习的过程。

网上相关的内容还不少，我就说一下我学习的内容。

看的第一篇文章《HighCharts入门》，正如它的名字一样，很好的讲解了各种参数以及使用步骤1234。

看的第二篇文章《HighCharts使用指南》，有一个很不错的结合后端读取数据实时更新图表的例子。但是有一点，用push添加数据我始终没有成功过……所以我有在网路上搜索了一番，解答终于让我在《HighChart学习-更新数据data Series与重绘》这里找到。后面我写的小实例就是用了这种方式。

如果还想更深入了解的话可以下载api，我这里有一版，打开看的时候如果啥都没有看看有没有报文件没找到的错，然后把js的路径对应上就可以看了「点这里下载」如果不管用也可以百度搜，资源很多的。

还有一个网址，介绍的比较详细，但是并没有完工，《HighCharts中文教程》。

附上我写的一个简单的例子。代码如下：

 <!DOCTYPE>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>無標題文件</title>

 <!--引用js文件-->

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 <script src="http://code.highcharts.com/highcharts.js"></script>

 <script src="http://code.highcharts.com/modules/exporting.js"></script>

 <!--绘制图表-->

 <script type="text/javascript">

 var chart;

 var data_name;

 $(function(){

     chart=new Highcharts.Chart({

         chart:{

             renderTo:'chartsContainer'

         },

         title:{

             text:'折线图的标题',

             x:-20//中间的位置

         },

         subtitle:{

             text:'折线图的副标题',

             x:-20

         },

         xAxis:{

             title:{

                 text:'x轴名称',

             },

             categories:['x1', 'x2', 'x3', 'x4', 'x5', 'x6','x7']

         },

         yAxis:{

             title:{

                 text:'y轴名称',

             }

         },

         colors:[

             '#FF0000',//红

             '#00FF00',//绿

             '#0000FF',//蓝

             '#FFFF00',//黄

           ],

         //在这里填充折线图数据

         series:[

             {

                 name:"数据1",

                 data:[1,2.25,3,3.25,3,2.25,1]

             },

             {

                 name:"数据2",

                 data:[-1,2.25,5,6,5,2.25,-1]

             }

         ],

         tooltip:{

             valueSuffix:"单位"

         },

         credits:{

             href:"http://www.cnblogs.com/SHL-sherly/",

             text:"SHL-博客园",

             position:{x:-30,y:-20}

         },

         //图例的样式，放置于图表中

         legend:{

             layout:'vertical',

             align:'right',

             verticalAlign:'top',

             x:-40,

             y:100,

             floating:true,

             borderWidth:1,

             backgroundColor:(Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),

             shadow:true

         }

     });

     for(var i=0;i<7;i++)

     {

         $("#dataswrapper").append('<input type="text" class="datainput"/>');

     }

     $("#dataswrapper").append('<input type="button" value="确认增加" onclick="addNewRecord();"/>')

 });

 function disp_prompt()

 {

     var dataname=prompt("请输入数据名称","数据1");

     if(dataname!=null&&dataname!="")

     {

         data_name=dataname;

         $("#dataswrapper").show();

     }

 }

 function addNewRecord()

 {

     var array="";

     $("#dataswrapper input.datainput").each(function() {

         if($(this).val()!=null&&$(this).val()!=""&&isNumber($(this).val()))

             array+=$(this).val()+",";

         else

             array+=0+",";

         $(this).val(null);

     });

     //字符串变成字符串数组

     array=array.trim(',').split(',');

     //这里要转化成数值才行，不知有没有更好的方法

     for(var i=0;i<array.length;i++){

         array[i]=parseFloat(array[i]);

     }

     //增加数据关键代码

     chart.addSeries({

         name:data_name,

         data:array

     },true);

     $("#dataswrapper").hide();

 }

 //判断是否是数字

 function isNumber(number)

 {

     var regEx=/^[0-9]+.?[0-9]*$/;

     return regEx.test(number);

 }

 //trim方法重写，⊙﹏⊙b汗

 String.prototype.trim=function(c)

 {

     if(c==null||c=="")

     {

         var regEx=new RegExp("/^/s*/");

         var str=this.replace(regEx,'');

         regEx=new RegExp("//s/");

         var i=str.length;

         while(regEx.test(str.charAt(--i)));

         return str.slice(0,i+1);

     }

     else

     {

         var regEx=new RegExp("^"+c+"*");

         var str=this.replace(regEx,'');

         regEx=new RegExp(c);

         var i=str.length;

         while(regEx.test(str.charAt(--i)));

         return str.slice(0,i+1);

     }

 }

 </script>

 <style type="text/css">

 .datainput{

     width:35px;

 }

 </style>

 </head>

 <body>

 <!--绘制图表的div-->

 <div id="chartsContainer" style="width:60%;height:500px;float:left"></div>

 <div>

 <input type="button" value="点此添加一条数据" onClick="disp_prompt()"/>

 <div id="dataswrapper" style="display:none;">

 <p>输入数据值（其实未必要按照x轴规定的七个，x轴和y轴会根据数据而变化，这里为了方便。另外不规范数据会被置0）</p>

 </div>

 <p style="color:red;font-size:12px;">*点击图例中的数据名，可以显示隐藏这条数据的所有记录，图表形状也会发生改变</p>

 </div>

 </body>

 </html>

运行效果演示：

另外说些题外话吧。用博客园几天来，只写了一点点文章，而且都没有什么技术水准。不但没有什么技术水准，文笔也烂的很！干巴巴的半天掰不出几个字来，最后搞得跟写实验报告似的。用这么正理八经的风格行文还要行云流水臣妾真是做不到啊！和我当初设想写出和别人一样整整齐齐又美丽的文章的想法相去甚远啊……咳咳，扯远了，其实我并没有想要如何如何，就是想记录下我这只菜鸟扑腾翅膀的历程，如果有和我一样的，还在这些简单的问题上扑腾的人，要是我写的东西能帮助你分毫，我简直开心的不得了。

以后我还是会继续写着我学到的东西。使劲儿扑腾。就算一时半会儿成不了大神，至少也要从一只菜鸟扑腾成一只大鸟。←_←别想歪，我的性别不允许我拥有那个东西。

——我怎么一扯起这些废话来就这么来劲呢！

[笔记]学习HighCharts的使用（不错的web图表插件）的更多相关文章

  1. 不错的jQuery图表插件 .

    很多时候我们需要在网页中显示数据统计报表,从而能很直观地了解数据的走向,更好地帮助决策分析.今天就给大家分享几个个人觉得好用的jQuery图表插件,这几个图表插件使用起来非常方便,而且挺灵活的,相信大 ...

  2. 利用Highcharts制作web图表学习（一）

    前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网   一.先说说HighCharts的 ...

  3. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  4. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  5. amazeui学习笔记一（开始使用4）--Web App 相关

    amazeui学习笔记一(开始使用4)--Web App 相关 一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...

  6. [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设

    [HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...

  7. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...

  8. 使用highcharts 绘制Web图表

    问题描述:     使用highcharts 绘制Web图表 Highcharts说明: 问题解决:     (1)安装Highcharts     在这些图表中,数据源是一个典型的JavaScrip ...

  9. Maven学习：Eclipse使用maven构建web项目(转）

    Maven学习:Eclipse使用maven构建web项目(转) 8.更改class路径:右键项目,Java Build Path -> Source 下面应该有4个文件夹.src/main/j ...

随机推荐

  1. Lamp源码包安装实录

    Lamp源码包安装实录 附件中是安装步骤,下载站点里包含视频(http://down.51cto.com/data/460776) 本文出自 "李晨光原创技术博客" 博客,请务必保 ...

  2. Oracle笔记 六、PL/SQL简单语句块、变量定义

    1.简单SQL语句,HellWorld示例 --输出信息 begin dbms_output.put_line('Oracle Hello World!'); end; 2.变量的定义.使用 --定义 ...

  3. Magento修改css样式

    Magento研究了第四天才开始搞明白怎么运行. 首先对于前端开发来说要修改样式的话需要运行: grunt less:luma 如果提示: 那就说明grunt配置的路径不对,默认是英文的,如果我们用中 ...

  4. sotower1.5-LS_工作流容易出错的地方

    流程代码如下: 1>LeiSheng.WorkFlow.FlowInfo fInfo = new LeiSheng.WorkFlow.FlowInfo();                2&g ...

  5. Android：控件布局（表格布局）TableLayout

    TableLayout继承LinearLayout 实例:用表格布局实现计算机布局>>>>>>>>>>>> 有多少个TableR ...

  6. Valid Parentheses [LeetCode 20]

    1- 问题描述 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if ...

  7. 可自定义导航条功能案例ios项目源码

    可定制的navigationitem ,当我们使用系统的方法设置navigationItem的leftItem或者rightItem时,我们会 发现item位置会有偏差(左边的偏右,右边的偏左).当设 ...

  8. 比较合并工具vimdiff的主要用法归纳

    参考:https://www.ibm.com/developerworks/cn/linux/l-vimdiff/ vimdiff主要用法归纳如下:   1.打开文件 vimdiff file1 fi ...

  9. C#流总结(文件流、内存流、网络流、BufferedStream、StreamReader/StreamWriter、TextReader/TextWriter)

    一.文件流 FileStream类主要用于读写磁盘文件.常用于向磁盘存储数据或读取配置文件. 读取文件: //文件流:读取 FileStream fileStream = File.Open(@&qu ...

  10. sql批量修改插入数据

    1.批量修改 select 'update 读者库 set 单位代码='''+新单位代码+''' where 单位代码='''+单位代码+'''' from 读者单位 ,)<'L' and is ...