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

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

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

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

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

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

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

  1 <!DOCTYPE>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>無標題文件</title>
  6 <!--引用js文件-->
  7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  8 <script src="http://code.highcharts.com/highcharts.js"></script>
  9 <script src="http://code.highcharts.com/modules/exporting.js"></script>
 10 <!--绘制图表-->
 11 <script type="text/javascript">
 12 var chart;
 13 var data_name;
 14 $(function(){
 15     chart=new Highcharts.Chart({
 16         chart:{
 17             renderTo:'chartsContainer'
 18         },
 19         title:{
 20             text:'折线图的标题',
 21             x:-20//中间的位置
 22         },
 23         subtitle:{
 24             text:'折线图的副标题',
 25             x:-20
 26         },
 27         xAxis:{
 28             title:{
 29                 text:'x轴名称',
 30             },
 31             categories:['x1', 'x2', 'x3', 'x4', 'x5', 'x6','x7']
 32         },
 33         yAxis:{
 34             title:{
 35                 text:'y轴名称',
 36             }
 37         },
 38         colors:[
 39             '#FF0000',//红
 40             '#00FF00',//绿
 41             '#0000FF',//蓝
 42             '#FFFF00',//黄
 43           ],
 44         //在这里填充折线图数据
 45         series:[
 46             {
 47                 name:"数据1",
 48                 data:[1,2.25,3,3.25,3,2.25,1]
 49             },
 50             {
 51                 name:"数据2",
 52                 data:[-1,2.25,5,6,5,2.25,-1]
 53             }
 54         ],
 55         tooltip:{
 56             valueSuffix:"单位"
 57         },
 58         credits:{
 59             href:"http://www.cnblogs.com/SHL-sherly/",
 60             text:"SHL-博客园",
 61             position:{x:-30,y:-20}
 62         },
 63         //图例的样式，放置于图表中
 64         legend:{
 65             layout:'vertical',
 66             align:'right',
 67             verticalAlign:'top',
 68             x:-40,
 69             y:100,
 70             floating:true,
 71             borderWidth:1,
 72             backgroundColor:(Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
 73             shadow:true
 74         }
 75     });
 76
 77     for(var i=0;i<7;i++)
 78     {
 79         $("#dataswrapper").append('<input type="text" class="datainput"/>');
 80     }
 81     $("#dataswrapper").append('<input type="button" value="确认增加" οnclick="addNewRecord();"/>')
 82 });
 83 function disp_prompt()
 84 {
 85     var dataname=prompt("请输入数据名称","数据1");
 86     if(dataname!=null&&dataname!="")
 87     {
 88         data_name=dataname;
 89         $("#dataswrapper").show();
 90     }
 91 }
 92 function addNewRecord()
 93 {
 94     var array="";
 95     $("#dataswrapper input.datainput").each(function() {
 96         if($(this).val()!=null&&$(this).val()!=""&&isNumber($(this).val()))
 97             array+=$(this).val()+",";
 98         else
 99             array+=0+",";
100         $(this).val(null);
101     });
102     //字符串变成字符串数组
103     array=array.trim(',').split(',');
104     //这里要转化成数值才行，不知有没有更好的方法
105     for(var i=0;i<array.length;i++){
106         array[i]=parseFloat(array[i]);
107     }
108     //增加数据关键代码
109     chart.addSeries({
110         name:data_name,
111         data:array
112     },true);
113
114     $("#dataswrapper").hide();
115 }
116 //判断是否是数字
117 function isNumber(number)
118 {
119     var regEx=/^[0-9]+.?[0-9]*$/;
120     return regEx.test(number);
121 }
122 //trim方法重写，⊙﹏⊙b汗
123 String.prototype.trim=function(c)
124 {
125     if(c==null||c=="")
126     {
127         var regEx=new RegExp("/^/s*/");
128         var str=this.replace(regEx,'');
129         regEx=new RegExp("//s/");
130         var i=str.length;
131         while(regEx.test(str.charAt(--i)));
132         return str.slice(0,i+1);
133     }
134     else
135     {
136         var regEx=new RegExp("^"+c+"*");
137         var str=this.replace(regEx,'');
138         regEx=new RegExp(c);
139         var i=str.length;
140         while(regEx.test(str.charAt(--i)));
141         return str.slice(0,i+1);
142     }
143 }
144 </script>
145 <style type="text/css">
146 .datainput{147     width:35px;
148 }
149 </style>
150 </head>
151
152 <body>
153 <!--绘制图表的div-->
154 <div id="chartsContainer" style="width:60%;height:500px;float:left"></div>
155 <div>
156 <input type="button" value="点此添加一条数据" onClick="disp_prompt()"/>
157 <div id="dataswrapper" style="display:none;">
158 <p>输入数据值（其实未必要按照x轴规定的七个，x轴和y轴会根据数据而变化，这里为了方便。另外不规范数据会被置0）</p>
159 </div>
160 <p style="color:red;font-size:12px;">*点击图例中的数据名，可以显示隐藏这条数据的所有记录，图表形状也会发生改变</p>
161 </div>
162 </body>
163 </html>

运行效果演示：

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

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

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

转载于:https://www.cnblogs.com/SHL-sherly/p/4333055.html

[笔记]学习HighCharts的使用（不错的web图表插件）相关推荐

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

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

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

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

  3. 按键精灵脚本 php,HTML_按键精灵 脚本-学习VBS的一个不错的教程，今天我就从总体上对VBS进行介 - phpStudy...

    按键精灵 脚本-学习VBS的一个不错的教程 今天我就从总体上对VBS进行介绍,希望能给大家一个直观的印象.另外,讲解与按键官网的按键精灵教程(李悦制作)相结合,帮大家看懂这个东东. 一.概述 要让计算 ...

  4. Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】

    Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

  5. CassiniDev源码学习 - 可替代IIS的单机Web Form解决方案

    CassiniDev源码学习 - 可替代IIS的单机Web Form解决方案 参考文章: (1)CassiniDev源码学习 - 可替代IIS的单机Web Form解决方案 (2)https://ww ...

  6. 【QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习（1）】

    [QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习(1)] 1.说明 2.实验环境 3.参照学习链接 4.自己的学习与理解 5.学习与实践代码. (1)建立基础工程. (2)加入绘图事 ...

  7. 分布式定时任务—xxl-job学习（四）——调度中心web页面端api调用源码分析

    分布式定时任务-xxl-job学习(四)--调度中心web页面端api调用源码分析 前言 一.controller目录下非controller类 1.1 PermissionLimit自定义注解 1. ...

  8. 算法笔记学习PAT甲级解题记录

    算法笔记学习记录 2019.06.26 float&&double 推荐全部使用double,注意区分scanf("%lf",&double1);与prin ...

  9. 【QT 5 学习笔记-学习绘图相关+画图形图片等+绘图设备+基础学习（2）】

    [QT 5 学习笔记-学习绘图相关+画图形图片等+绘图设备+基础学习(2)] 1.说明 2.实验环境 3.参照连接 4.自己的学习与理解 5.学习与实践代码 (1)移动图片测试实验 (1)继续之前的工 ...

最新文章

  1. cookie 免密登录_python
  2. C++的this指针和引用符号的搭配使用理解
  3. windows下安装nodejs、webpack及打包步骤
  4. BLE-NRF51822教程4-串口BLE解析
  5. 18、Power Query-SQL筛选
  6. View.inflate和LayoutInflater的inflate方法区别
  7. 一个毕业生对大学爱情和奋斗的思考！
  8. mysql递归查询所有上下节点_非递归打印二叉树的所有路径，保存父节点和孩子节点到底有啥差别...
  9. java语言程序设计教程翁恺第二版课后答案_《JAVA语言程序设计教程(第2版)/翁恺 肖少拥》翁恺，肖少拥著【摘要 书评 在线阅读】-苏宁易购图书...
  10. 2017.10.12 小Q的无敌异或 失败总结
  11. HTML自动刷新页面
  12. Linux 给普通用户分配root权限或给用户分配多个用户组
  13. 修改eclipse或者myeclipse的背景颜色（全部的背景颜色）
  14. 在线电子名片html,HTML5 个人信息卡片（电子名片）模板
  15. jtopo node.text换行_JTopo 使用
  16. 实力验证：金蝶EAS 8.2授权注册 （包含Apusic 9999连接数破解）
  17. webrtc音频QOS方法四（音频接收端NACK流程实现）
  18. 腾讯不缺少梦想，但是缺算法与数据管理
  19. ROS：launch规范及用法
  20. 保留两位小数除法算式_小数除法计算题100道

热门文章

  1. Elasticsearch提示low disk watermark [85%] exceeded on [UTyrLH40Q9uIzHzX-yMFXg][Sonofelice][/Users/baid
  2. 政府大数据中心数据资源平台建设方案WORD2022
  3. 可视化神器Plotly玩转箱形图
  4. 配置Fiori for iOS开发环境
  5. v-model.trim的作用
  6. C++实现Structural - Proxy模式
  7. 由于装备新的计算机英语,大学英语4课后cloze及翻译原题带答案整理完整清晰
  8. hping3工具介绍
  9. 详解Spring Boot中@ConditionalOnProperty使用方法
  10. 从oracle 8i数据库渗透整个系统（可以直接上手）