最近有一个小项目需要用到折线图。到处请教了一下，有人给我推荐了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. JQ仿select框

    点击[cy_title]后弹出[cy_list]层,选中里面的元素把值赋给 [cy_title] 在[cy_list] 打开的时候,点击其他地方可以关闭: HTML: <div class=&q ...

  2. Oracle多线程并行使用、关联与指定索引执行

    nologging AS SELECT /*+parallel(4) leading(s a) use_hash(A) index(s IDX_CS_SERVICE_RECORD_MD2_04) */ ...

  3. 在Apache下发布ASP.NET程序

    为什么要在apache下发布ASP.NET,看这篇文章您一定有自己的原因. 我是因为XP系统里面同时装IIS 和 AppServer会有问题. 步骤: 1.环境搭建,这个不废话,我安装的是.NET2. ...

  4. C\C++ 框架和库整理（转）

    [本文系外部转贴,原文地址:http://coolshell.info/c/c++/2014/12/13/c-open-project.htm]留作存档 下次造轮子前先看看现有的轮子吧 值得学习的C语 ...

  5. iOS开发优化的25个方案

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

  6. JavaScript学习小结(一)——JavaScript入门基础

    一.JavaScript语言特点 1.1.JavaScript是基于对象和事件驱动的(动态的) 它可以直接对用户或客户输入做出响应,无须经过Web服务程序.它对用户的响应,是采用以事件驱动的方式进行的 ...

  7. POJ C程序设计进阶 编程题＃2：字符串中次数第2多的字母

    编程题#2:字符串中次数第2多的字母 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536k ...

  8. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  9. mariadb一些命令介绍及mariadb架构图和索引

    mariadb> SHOW GLOBAL VARIABLES; 全局变量影响服务器的全局操作 mariadb> SHOW [SESSION] VARIABLES; 客户端变量,只对当前会话 ...

  10. highcharts与highstock实例

    highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...