HIGHCHARTS 简介:
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
Highcharts 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本,在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。
图表类型
line:直线图
spline:曲线图
area:面积图
areaspline:曲线面积图
arearange:面积范围图
areasplinerange:曲线面积范围图
column:柱状图
columnrange:柱状范围图
bar:条形图
pie:饼图
scatter:散点图
boxplot:箱线图
bubble:气泡图
errorbar:误差线图
funnel:漏斗图
gauge:仪表图
waterfall:瀑布图
polar:雷达图
pyramid:金字塔
页面引入JS即可<script src="<%=basePath%>highcharts/highcharts.js"></script>
页面元素<div id="container" style="width:48%;height:48%;float:left;"></div>
<div id="container1" style="width:48%;height:48%;float:left;"></div>
<div id="container2" style="width:48%;height:48%;float:left;"></div>
页面JS方法
function setChart(type){
highcharts("container",type,'日志分类统计',jsonobj.names,jsonobj.vals,"日志数","条");
highcharts("container1",type,'近三十日(日日志统计)',jsonobj.names1,jsonobj.vals1,"日志数","条");
highcharts("container2",type,'近十二月(月日志统计)',jsonobj.names2,jsonobj.vals2,"日志数","条");
}
function highcharts(id,type,title,categories,data,ytitle,ext){
$('#'+id).highcharts({
chart: {
type: type
},
title: {
text: title
},
subtitle: {
text: ''
},
xAxis: {
categories:categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ytitle
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:f} '+ext+'</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: ytitle,
data: data
}]
});
}
切换图表
<SELECT id="chart" οnchange="setChart(this.value)" style="float:right;margin-right:10px">
<option value="column">条形统计图</option>
<option value="spline">折线统计图</option>
<option value="area">面积图</option>
</SELECT>