HighCharts-教程+例子

HighCharts-教程+例⼦
Highchart简介：
Highcharts是⼀款免费开源的纯javascript编写的图表库，能够很简单便捷的在Web⽹站或Web应⽤中添加交互性的图表，
Highcharts⽬前⽀持直线图、曲线图、⾯积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满⾜你对Web图表的任何需求！Highcharts功能强⼤，图表种类多也很漂亮，⾼度⾃定义，兼容性⽐较好。

具体参考：
使⽤准备：
1.在官⽹上找到下载链接即可，其中有3个下载项，highchart为主要的，后⾯两个，highmaps是主题为地图的⼀些图表。

highstock是主题为股票的⼀些折线图，是⼀些⾏业定制化的⼯具
2.使⽤highchart需要两个⽂件⼀个是基础的jquery(jquery建议1.8.2版本)或者prototype等js框架，以及highcharts.js。

可以在线引⽤，但是可能不太稳定，建议本地引⽤。

需要在移动端使⽤的时候，考虑这个。

另外图表导出等⾼级功能，需要额外引⼊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={};
=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);
}
}
=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: '
},
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
});
}
});
});
通过上⾯的⼀系列做法可以实现根据后台数据⽣成图表，但是过程⽐较⿇烦，后⾯再寻求简化的办法。

----未完待续。