最近在做高校的项目,之前的博客也写过一些总结,但是还不是很好,总结也是一种能力,努力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