HighCharts -教程+例子
Highchart简介:
Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,
Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !
Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好。具体参考:http://www.hcharts.cn/docs/index.php?doc=start-introduction
使用准备:
1.在官网上找到下载链接即可,其中有3个下载项,highchart为主要的,后面两个,highmaps是主题为地图的一些图表。highstock是主题为股票的一些折线图,是一些行业定制化的工具
2.使用highchart需要两个文件一个是基础的jquery(jquery建议1.8.2版本)或者prototype等js框架,以及highcharts.js。可以在线引用,但是可能不太稳定,建议本地引用。
![](http://images2015.cnblogs.com/blog/1000039/201607/1000039-20160731124356825-1434719146.png)
需要在移动端使用的时候,考虑这个。另外图表导出等高级功能,需要额外引入exporting.js 等文件。
HelloWorld
1.创建div容器,图表将在这个容器里画出来,需要制定id,style长宽样式需要制定。
<div id="container" style="min-width:800px;height:400px"></div>
2.先引入jquery.js,最好1.8.2版本;highchart.js,因为后者基于前者,所以顺序不能颠倒。
3.使用script包含js代码,记住 type="text/javascript" 需要指定,以免出问题。
4.写代码,代码可以放在$(function(){ });中,也可以放在ajax的回调函数里,总之要保证执行到。
$('#container').highcharts({ //图表展示容器,与div的id保持一致 chart: { type: 'column' //指定图表的类型,默认是折线图(line) }, title: { text: 'My first Highcharts chart' //指定图表标题 }, xAxis: { categories: ['my', 'first', 'chart'] //指定x轴分组 }, yAxis: { title: { text: 'something' //指定y轴的标题 } }, series: [{ //指定数据列 name: 'Jane', //数据列名 data: [1, 0, 4] //数据 }, { name: 'John', data: [5, 7, 3] }] });
highchart的代码,都是json形式的,易于理解和开发,数据也可以用json来填充,下面举个自己做的例子看一看。
+----------+----------------+----------+-------------+
| store_id | store_name | dur_flow | statis_time |
+----------+----------------+----------+-------------+
| 1 | 上海虹桥店 | 12 | 9:00 |
| 2 | 上海虹桥店 | 32 | 10:00 |
| 4 | 上海虹桥店 | 122 | 11:00 |
| 5 | 上海虹桥店 | 192 | 12:00 |
| 6 | 上海虹桥店 | 325 | 13:00 |
| 7 | 上海浦东店 | 18 | 9:00 |
| 8 | 上海浦东店 | 38 | 10:00 |
| 9 | 上海浦东店 | 78 | 11:00 |
| 10 | 上海浦东店 | 158 | 12:00 |
| 11 | 上海浦东店 | 268 | 13:00 |
| 12 | 上海南京东路店 | 8 | 9:00 |
| 13 | 上海南京东路店 | 18 | 10:00 |
| 13 | 上海南京东路店 | 38 | 11:00 |
| 14 | 上海南京东路店 | 198 | 12:00 |
| 15 | 上海南京东路店 | 438 | 13:00 |
| 16 | 上海南京东路店 | 518 | 14:00 |
| 17 | 上海浦东店 | 398 | 14:00 |
| 18 | 上海虹桥店 | 418 | 14:00 |
+----------+----------------+----------+-------------+
//后台取的数据,一个List<TestChart> List<TestChart> dat = testChartService.selectStorData(); System.out.println(dat.toString()); writeJson(response, dat);
$(function () { $.ajax({ type: 'post', url: '<%=basePath%>storeData', async: true, cache: false, dataType: 'json', success: function (data) { /*这种方式可以,但是感觉多次一举了*/ /* var abc = []; for(var i=0;i<data.length;i++){ var bcd={}; bcd.name=data[i].name; bcd.data=data[i].data; abc.push(bcd); }*/ /*这种方式尽管可以做到,但是毫无疑问太麻烦了!*/ /*取店名(如果col里已经有店名了,就不在放进去,实现去重)*/ var col = []; for (var i = 0; i < data.length; i++) { if (col.indexOf(data[i].storeName) > -1) { continue; } col.push(data[i].storeName); } /*取时间段,同理*/ var xcate=[]; for (var i = 0; i < data.length; i++) { if (xcate.indexOf(data[i].statisTime) > -1) { continue; } xcate.push(data[i].statisTime); } /*循环取出每个店的所有数据,分店存储为对象,再添加到一个array中,充当series的内容*/ var alldat=[]; for (var j = 0; j < col.length; j++) { var each={}; var singledat = []; for (var i = 0; i < data.length; i++) { if (data[i].storeName == col[j]) { singledat.push(data[i].durFlow); } } each.name=col[j]; each.data=singledat; alldat.push(each); } console.log(alldat); $('#container').highcharts({ chart: { //type=bar为柱图,type=line为线图 type: 'bar', borderRadius: 6, borderColor: '#4572A7', backgroundColor: '#EEEEEE ' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { categories: xcate, title: { text: null } }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valueSuffix: ' millions' }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 100, floating: true, borderWidth: 1, backgroundColor: '#FFFFFF', shadow: true }, credits: { enabled: false }, series: alldat }); } }); });
通过上面的一系列做法可以实现根据后台数据生成图表,但是过程比较麻烦,后面再寻求简化的办法。
----未完待续