HighCharts簡介
最近做的項目需要用到數據分析,圖表顯示,之前做項目的時候用到過highcharts,不過也只是簡單的會用而已,然後再網上查了查highcharts的優點:
Highcharts使用的一些優點的介紹。 一、首先、使用Highcharts能快速、簡單的做出各種諸如柱狀圖、餅狀圖、曲線圖等多種形式的統計圖或者走勢圖。使用者只需要提供對應的數據、以及簡單的Highcharts的配置即可。使用簡單。 二、跨語言跨平臺支持多種瀏覽器。Highcharts是基於js製作出來的。是一個js類庫。無論你使用什麼後端語言,都可以很方便的使用Highcharts來做圖表或者統計。 三、使用門檻極低、稍微看一下API都可以做出各種符合要求的統計圖表等。 數據靈活。支持xml 和json。
Highcharts是一款開源圖表庫,開源但不完全免費。Highcharts針對個人用戶及非商業用途免費,商業用途需要購買授權。
HighCharts的使用
下載插件
若要用HighCharts的話,得先引用它的插件,插件不大,核心文件只有一個highcharts.js
文件,可以去HighCharts官網上去下載:
如果需要導出圖表,則需要exporting.js
文件
如果需要一些特殊的圖形呈現,則還需要下載highcharts-more.js
具體應用
FIRSTLY
首先,下載完成之後,就把js文件引用到項目中
<!--highcharts核心文件--> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <!--導出需要引用的文件--> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
SECONDLY
在界面中定義<div>
盒子:
<div class="row"> <div id="pieChart" style="float: left; height: 550px;margin-left:20px;"></div> <div id="columnChart" style="float: left; height: 550px; margin-left:20px;"></div> </div>
THIRDLY
在js中定義如何接受數據,和如何顯示錶格的樣式,highcharts的這些樣式都是可以通過js控制的,因爲highcharts本身就是用JavaScript編寫的一個圖表庫。在這裏我只是用餅形圖,和柱狀圖做例子。
//圖標分析公用部分--同時顯示兩個圖表(餅型和柱狀) function chartAnalyze(Result,title){ /* alert(data); */ var strJson = Result; var data = []; for ( var i in strJson) { var serie = new Array(strJson[i].name, strJson[i].count); data.push(serie); } PieChart(data,title); ColumnChart(data,title); } //圖標分析公用部分--只顯示一個圖表(柱狀) function scoreAnalyze(result,title){ var strJson = Result; var data = []; for ( var i in strJson) { var serie = new Array(strJson[i].name, strJson[i].count); data.push(serie); } ColumnChart(data,title); } //餅圖 function PieChart(series,title) { $('#pieChart').highcharts({ chart : { plotBackgroundColor : null, plotBorderWidth : null, plotShadow : false }, credits : { enabled : false, }, title : { text : title }, tooltip : { pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions : { pie : { allowPointSelect : true, cursor : 'pointer', dataLabels : { enabled : true, format : '<b>{point.name}</b>: {point.percentage:.1f} %' }, showInLegend : true } }, series : [ { type : 'pie', data : series } ] }); } //柱狀圖 function ColumnChart(series,title) { $('#columnChart').highcharts({ chart: { type: 'column', }, credits: { enabled: false, }, title: { text: title }, xAxis: { categories: [ ], labels: { rotation: -45, align: 'right', style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: '總數' } }, legend: { enabled: false }, tooltip: { pointFormat: '數量', }, series: [{ name: 'Population', data: series, dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', x: 4, y: 10, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black' } } }] }); }
FINALLY
js接受從後臺傳到界面上的json對象,然後綁定到圖表上進行顯示。秀一下最終的結果。
現在對於highcharts的使用也只是處於會用的階段,具體每一種圖表在哪一種場景下使用還是不確定的,在後面的博客中會進行深入的研究!期待!