最近有一个小项目需要用到折线图。到处请教了一下，有人给我推荐了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. iosiOS 地图 自定义以及添加锚点

    - (void)clickLongPress:(UILongPressGestureRecognizer *)longPress { CGPoint point = [longPress locati ...

  2. Lamp源码包安装实录

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

  3. A new start！

    从今天起,开始每天晚上拿出来半个小时到一个小时的时间来总结今天我做的那些事情,有哪些进步,有哪些不足,有哪些心得和笔记. 以前的学习都是每天学完就往脑袋后面一放,导致很多东西当时学会了,但是后面就都想 ...

  4. Leetcode005 Longest Palindromic Substring

    o(n)算法地址:http://blog.163.com/zhaohai_1988/blog/static/2095100852012716105847112/ /* pivot varies whe ...

  5. 【qt4.8.6】qt-everywhere-opensource-src-4.8.6静态库编译，搭建vs2010 + Qt4.8.6环境

    公司的电脑上无法运行QtCreator, 又想用Qt,只能搞vs2010+Qt了, 看到运行时要链接一个几M到十几M的QtCore.dll和QtGui.dll,又有一种在用C#写的程序的感觉,很不爽, ...

  6. Magento修改css样式

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

  7. IEF could not decode Chinese character in IE history well

    My friend is working on some case, and she looks not in the mood. I ask her what's going on. She wan ...

  8. 设计模式-工厂方法模式(FactoryMethod)

    简介: 简单工厂模式将类的示例化放在工厂对象中. 工厂方法模式是简单工厂模式的延伸,不同的是其将子类的实例化延迟到子类工厂中实现,本身仅定义一个创建对象的接口. 工厂方法模式主要由四部分组成: 1.抽 ...

  9. Android开发教程AnimationDrawable逐帧播放动画

    下面我们一起来看篇Android开发AnimationDrawable控制逐帧播放动画实现过程,希望文章对各位朋友带不一些帮助. 当我们点击按钮时,该图片会不停的旋转,当再次点击按钮时,会停止在当前的 ...

  10. C#winform初试报表

    步骤1.新建一个窗口,拖一个ReportViewer控件上去,设置该控件的Dock为Fill. 步骤2.添加一个报表文件,如:Report1.rdlc,设置其中的参数,这里设置的参数和下面的代码里面的 ...