最近有一个小项目需要用到折线图。到处请教了一下，有人给我推荐了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. javascript设计模式-观察者模式

    观察者模式定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. UML示意图: 其中的角色: Subject:主 ...

  2. Mysql group by 排序问题

    类如 有一个 帖子的回复表,posts( id , tid , subject , message , dateline ) , id 为 自动增长字段, tid为该回复的主题帖子的id(外键关联), ...

  3. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  4. Shiro使用总结

    Shiro已经添加到项目中,现阶段管理两个功能: 1.身份验证:(已经能够满足现阶段需求) 2.权限管理: 权限管理,需要在界面中加一些标签,后台角色.资源的管理也需要整理好,然后在前端添加管理. 1 ...

  5. Windows Phone 8 通过一个app启动另一个app

    Winphone8 通过app启动第三方app需要被启动的app支持,具体操作步骤如下: 假设要通过PhoneApp2启动PhoneApp1 PhoneApp1端做的操作如下: 1.注册Protoco ...

  6. Android开发教程 录音和播放

    首先要了解andriod开发中andriod多媒体框架包含了什么,它包含了获取和编码多种音频格式的支持,因此你几耍轻松把音频合并到你的应用中,若设备支持,使用MediaRecorder APIs便可以 ...

  7. C puzzles详解【16-20题】

    第十六题 The following is a small C program split across files. What do you expect the output to be, whe ...

  8. debug版本和release版本的区别?

    好久没有做web项目了,这项目完成了要发布网站,不好忘了 以前操作过的? 还好脑子还是有点印象 现还是 写个文档吧记录吧 免得 以后作别的了又忘了 那可不妙啊 网站发布步骤:1.先将

  9. kettle的hello world

    本篇介绍使用kettle的一个最简单的例子,可以初步了解下转换. 需求是这样的: 存在一个本地csv文件,文件的内容如下 现在需要将csv中的数据保存到本地的文本文件中 1.创建一个转换,并且重命名 ...

  10. 360提供的SQL防注入

    <?php class sqlsafe { private $getfilter = "'|(and|or)\\b.+?(>|<|=|in|like)|\\/\\*.+?\ ...