一.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]
}
]
});
});
