一.highcharts簡介以及引入 highcharts作為免費提供給個人學習、個人網站和非商業用途使用的前端圖表演示插件的確使用起來十分方便和輕便。在我最近完成一個需求的時候用到了它， 它的相容性也很強，其在標準（W3C標準）瀏覽器中使用SVG技術渲染圖形，在遺留的IE瀏覽器中使用VML技術來....
一.highcharts簡介以及引入
highcharts作為免費提供給個人學習、個人網站和非商業用途使用的前端圖表演示插件的確使用起來十分方便和輕便。在我最近完成一個需求的時候用到了它， 它的相容性也很強，其在標準（W3C標準）瀏覽器中使用SVG技術渲染圖形，在遺留的IE瀏覽器中使用VML技術來繪圖。我們在使用highcharts的時候只需要引入highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一個，在此我們使用jQuery。
只需在你的項目中如此引用就能方便的調用它的各種函數
<script src="./jquery-1.8.3.min.js"></script> <script src="./highcharts.js"></script>
二.常用圖表介紹
HighCharts支持圖表類型，包括曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表等,在此主要介紹一下餅圖，柱狀圖以及線性圖的屬性和調用方法。
首先要確保如上的代碼正確引用，新建一個index.html，加入以下代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script src="js/highcharts.js"></script> <script> var params ={ }; $(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}: <b>{point.percentage:.1f}%</b>' }, credits: {//去掉圖標 enabled: false }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', size:params.size || 100,//pie size dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: <br>{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: '<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:.1f} '+'（個）'+'</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, pointWidth:params.pointWidth||30 //寬度 } }, series: params.series|| [{ name: ['數量'], data: [213,321,112] } ] }); }); </script> </head> <body> <div class="pieChart"></div> <div id="lineChart"></div> <div class="barChart"></div> </body> </html>
運行就可以看到常用的餅圖，條形圖柱狀圖已經順利生成了。
我們可以看到在highchart中，是利用jquery選擇器去選擇相應的元素進行繪圖，所以我們可以靈活的使用id，class等選擇器為我們綁定圖表。
三.常用屬性介紹
成功了運行上面的圖表生成代碼，那麼下麵我來為大家介紹一下其中常用的屬性，以滿足一般開發要求。
1.chart 顧名思義圖表屬性，通過改變它去改變圖表的樣式等
type: 'spline', //圖表類型
plotBackgroundColor: null, //繪製圖形區域的背景顏色
plotBorderWidth: null, //邊框顏色
plotShadow: true, //繪圖區投影
width: params.width || 200, //整個繪圖區域寬度
height: params.height || 200, //這個繪圖去高度
margin: [0, 0, 0, 0],//繪圖區域margin
reflow: false,//自動縮放
events: //圖表事件監聽器
2.title
text: params.title// title的文字信息
3.credits
enabled: false// 不展示logo
4.plotOptions 對應的圖形樣式設定
pie: {//餅圖
allowPointSelect: true,
cursor: 'pointer',
size:params.size || 100,//餅圖中，餅圖自身半徑
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: <br>{point.percentage:.1f} %',
distance: -5 //用於設置餅圖上描述文字的位置
},
}
plotOptions: {// 折線圖
line: {
animation: false
},
series: {
animation: false
}
},
plotOptions: {//柱形圖
column: {
pointPadding: 0.2,
borderWidth: 0,
pointWidth:params.pointWidth||30 //寬度
}
}
5.series 圖表數據，註意儘量用number類型而不是string，因為除了餅圖外，string值不被識別
