最近有一个小项目需要用到折线图。到处请教了一下，有人给我推荐了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. eclipse+maven+jetty环境下修改了文件需要重启才能修改成功

    遇到这种情况,需要在类库文件夹中修改配置文件(C:\.m2\repository\org\mortbay\jetty\jetty\6.1.22) 在以上路径下添加如下路径的压缩文件中的两个文件即可 路 ...

  2. openstack openrpc

  3. asp.net身份认证

    在网上看到几篇比较好的文章很详细讲解了Form.Membership.以及Identity身份认证 Form身份认证: http://www.cnblogs.com/fish-li/archive/2 ...

  4. Sublime Text 2 常用快捷键

    Sublime Text 2 常用的快捷键 (不包含插件快捷键) Ctrl+P 打开文件搜索框,可以直接输入文件名搜索,或者输入@funcName 可以直接到函数定义处,输入#key 可以直接查找,输 ...

  5. Objective-C基本数据类型、表达式和语句

    一.基本数据类型 1.一般的计算机语言在定义变量的时候,需要提供给两个内容:类型和名字. 比如:int myClassID; 2.在Xcode中,无论你使用的是GCC编译器还是LLVM编译器,如果我们 ...

  6. 前端基础 - Defer对象

    参考:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html < ...

  7. jQuery实现跨域访问

    示例: $.ajax({ url: url, crossDomain: true, async: false,dataType:"jsonp" }); 说明:$.ajax()有很多 ...

  8. python restful 框架之 eve 外网访问设置

    官网地址: http://python-eve.org/ 配合mongodb进行crud使用起来很方便,但是部署的时候遇到一个问题,按照官网和Deom说的,servername使用 '127.0.0. ...

  9. Windows 上如何安装Sqlite(转载)

    1.获得命令行程序 SQLite命令行程序(CLP)是开始使用SQLite的最好选择,按照如下步骤获取CLP: 1).打开浏览器进入SQLite主页,   www.sqlite.org. 2).单击页 ...

  10. [笔记]--Sublime Text 2使用技巧

    Sublime个人喜好设置: 在打开个人设置页面Preferences >> Settings - User,加入以下内容: { , //TAB键,4个空格 "translate ...