项目收获之highcharts——界面图表showtime

来源：互联网发布：网络731代表什么意思编辑：程序博客网时间：2024/06/06 03:18

最近在做高校的项目，之前的博客也写过一些总结，但是还不是很好，总结也是一种能力，努力ing
进入主题：Highcharts ——用纯JavaScript编写的图表库
what is it ?
一张图胜过千言万语，这些图都是我们hero的功劳，通过Highcharts可以画出下面这些绚丽的图表：3D的哦~~

不是自己做出来的，就不再秀了；不得不说——编程、好厉害啊，膜拜这些大神O(∩_∩)O
所以总的来说：

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图等等11种图表

HOW：引用、编辑

首先用引用js:Highcharts.js挺好找的，如果找不到的话，喏、链接给你

入门的特别简单，网上也有很多资源，有一些在线的演示，这是一个实例：点击打开链接

敲门砖：栗子

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>第一个Highcharts</title><script src="js/jquery.js"></script><script src="js/highcharts.js"></script></head><body><!--        作者：mxinga@163.com        时间：2017-03-09        描述：div 用于包含 Highcharts 绘制的图表        --><div id="container" style="width: 550px; height: 400px; margin: 0 auto;"></div> <script language="JavaScript">$(document).ready(function(){//为图表配置标题：var title={text:'月平均气温'};//为图表配置副标题：var subtitle={text:'Source: runoob.com'};var xAxis = {       categories: ['一月', '二月', '三月', '四月', '五月', '六月'              ,'七月', '八月', '九月', '十月', '十一月', '十二月']   };var yAxis = {      title: {         text: 'Temperature (\xB0C)'      },      plotLines: [{         value: 0,         width: 1,         color: '#808080'      }]   };//配置提示信息：var tooltip = {  valueSuffix: '\xB0C'}   //配置图表向右对齐：   var legend={layout:'vertical',align:'right',};//配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中var series=[{name:'Tokyo',data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]},{name:'New York',data:[-0.2,0.8,5.7,11.4,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]},{name:'Berlin',data:[-0.9,0.6,3.5,8.4,13.5,27.0,18.6,17.9,14.3,9.0,3.9,1.0]},{name:'London',data:[3.9,4.2,5.7,8.5,11.9,15.3,17.9,16.6,14.3,10.2,6.6,4.8]}];var json={};json.title=title;json.subtitle=subtitle;json.xAxis=xAxis;json.yAxis=yAxis;json.Tooltip=tooltip;json.legend=length;json.series=series;$('#container').highcharts(json);});</script></body></html>

名词解释，上张宝图：

这是一个教程，菜鸟教程写的就已经很棒了
总结：

发现了好玩的东西，这个够炫、希望学习的过程中不要遇到太多的bug，不能这么说，问题使me成长，I love trouble ，No i don't.Thank for your time.
参考：
https://www.hcharts.cn/docs/basic-compose
http://www.runoob.com/highcharts/highcharts-configuration-syntax.html

0 0