一.highcharts简介以及引入
highcharts作为免费提供给个人学习、个人网站和非商业用途使用的前端图表演示插件的确使用起来十分方便和轻便。在我最近完成一个需求的时候用到了它， 它的兼容性也很强，其在标准(W3C标准)浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。我们在使用highcharts的时候只需要引入highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个，在此我们使用jQuery。
只需在你的项目中如此引用就能方便的调用它的各种函数
二.常用图表介绍
HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等,在此主要介绍一下饼图，柱状图以及线性图的属性和调用方法。
首先要确保如上的代码正确引用，新建一个index.html，加入以下代码
Documentvarparams={
};
$(function() {
$('.pieChart').highcharts({
chart: {
plotBackgroundColor:null,//绘制图形区域的背景颜色
plotBorderWidth:null,//边框颜色
plotShadow:true,//绘图区投影
width: params.width|| 200,//height: params.height|| 200,//margin: [0,0,0,0],
reflow:false,//自动缩放
//animation:false
},
title: {
text:'饼图'},
tooltip: {
pointFormat:'{series.name}: {point.percentage:.1f}%'},
credits: {//去掉图标
enabled:false},
plotOptions: {
pie: {
allowPointSelect:true,
cursor:'pointer',
size:params.size|| 100,//pie size
dataLabels: {
enabled:true,
color:'#000000',
connectorColor:'#000000',
format:'{point.name}:
{point.percentage:.1f} %',
distance:-5},
}
},
series: [{
type:'pie',
name:'Browser share',
data: [
['Firefox',45.0],
['IE',26.8],
{
name:'Chrome',
y:12.8,
sliced:true,
selected:true},
['Safari',8.5],
['Opera',6.2],
['Others',0.7]
]
}]
});
$('#lineChart').highcharts({
chart: {
type:'spline',
width:200,//height:200,//
animation: Highcharts.svg,//don't animate in old IE
marginRight:10,
events: {
load:function() {
}
}
},
credits: {
enabled:false},
plotOptions: {
line: {
animation:false},
series: {
animation:false}
},
title: {
text:'线性图'},
xAxis: {
type:'datetime',//dateTimeLabelFormats: { // don't display the dummy year
//second: '%H:%M:%S'
},
yAxis: {
title: {
text:'单位(Mbit/s)'},
plotLines: [{
value:0,
width:1,
color:'#808080'}] ,
min:0,
allowDecimals:false},
series: [{
name:'网站流量',
data:[ [1453443752602,30.2], [1453443753602,47.9], [1453443754602,38.2], [1453443755602,59.8], [1453443756602,43.3], [1453443757602,57.1], [1453443758602,52.2], [1453443759602,48] ]
}]
});
$('.barChart').highcharts({
chart: {
type:'column',
height:200,
width:params.width|| 250,
},
credits: {
enabled:false},
legend:{
enabled:false},
title: {
text: params.title
},
subtitle: {
text:''},
xAxis: {
categories:params.categoriesArr||['当前','周','月']
},
yAxis: {
min:0,
title: {
text: params.yUnit||'(个)'}
},
tooltip: {
headerFormat:'{point.key}
pointFormat:'
{series.name}: ' +'
{point.y:.1f}'+'(个)'+'',footerFormat:'
',shared:true,
useHTML:true},
plotOptions: {
column: {
pointPadding:0.2,
borderWidth:0,
pointWidth:params.pointWidth||30 //宽度
}
},
series: params.series||[{
name: ['数量'],
data: [213,321,112]
}
]
});
});
