新手學HighCharts（一）----基本使用

HighCharts簡介

---

最近做的項目需要用到數據分析，圖表顯示，之前做項目的時候用到過highcharts，不過也只是簡單的會用而已，然後再網上查了查highcharts的優點：

Highcharts使用的一些優點的介紹。 一、首先、使用Highcharts能快速、簡單的做出各種諸如柱狀圖、餅狀圖、曲線圖等多種形式的統計圖或者走勢圖。使用者只需要提供對應的數據、以及簡單的Highcharts的配置即可。使用簡單。 二、跨語言跨平臺支持多種瀏覽器。Highcharts是基於js製作出來的。是一個js類庫。無論你使用什麼後端語言，都可以很方便的使用Highcharts來做圖表或者統計。 三、使用門檻極低、稍微看一下API都可以做出各種符合要求的統計圖表等。 數據靈活。支持xml 和json。

Highcharts是一款開源圖表庫，開源但不完全免費。Highcharts針對個人用戶及非商業用途免費，商業用途需要購買授權。

HighCharts的使用

---

下載插件

若要用HighCharts的話，得先引用它的插件，插件不大，核心文件只有一個highcharts.js文件，可以去HighCharts官網上去下載：

http://www.highcharts.com/download

如果需要導出圖表，則需要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的使用也只是處於會用的階段，具體每一種圖表在哪一種場景下使用還是不確定的，在後面的博客中會進行深入的研究！期待！