HighCharts基本使用執行個體(入門)

HighCharts摘要

HighCharts是目前最為流行的圖表外掛程式,應用範圍廣泛,目前支援曲線圖、地區圖、3D圖、柱狀圖、餅圖、散列圖、混合圖等，並且還支援一些拓展的特殊圖表，如：儀錶圖、極地圖、盒狀圖、瀑布圖等。因工作中用到，所以在這裡我只做最基本的配置使用。
官方網站:www.highcharts.com,有興趣的同學也可以去上面學習更多的內容。

使用

首先需要到下載安裝包 - highcharts下載
解壓，然後匯入兩個js檔案，然後寫代碼。舉個官網上最簡單的例子：

<!doctype html><head>  <meta charset="utf-8" />  <script src="檔案所在路徑/jquery-1.8.3.js"></script>  <script src="檔案所在路徑/highcharts.js"></script>  <script>    $(function () {    $('#chart').highcharts({        title: {            text: 'xxx圖表'//指定圖表標題        },        xAxis: {            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x軸標籤            labels : //定義x軸標籤的樣式            {                    rotation : -80 ,                    fontStyle : 'italic',                    style: {                        fontSize:'',                        fontFamily: '微軟雅黑'                     }            }        },        yAxis: {            title: {                text: 'Temperature (°C)'  //指定y軸標題            }        },        tooltip: {            valueSuffix: '°C'   //指定滑鼠移動到某個點上的提示框單位        },        legend: {  //            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: [{            name: '溫度',            type:'column', //指定圖表類型 為柱狀圖，預設為折線圖。            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //y軸資料        }]    });});  </script></head><body>  <div id="chart" style="min-width:700px;height:400px"></div></body></html>

直接將以上代碼粘貼到檔案中，修改一下js路徑，運行就可以。

還可以支援動態拓展，比如：動態增加y軸，動態修改標題等等。

//擷取highcharts對象chart = $('#chart').highcharts();//chart.addAxis({     id: 'precipitation',    title: {        text: '降雨量'    },    lineWidth: 2,    lineColor: '#08F',    labels: {        format: '{value} mm',        style: {            color: '#08F'        }    },    opposite: true //在右邊軸顯示 ， 用於需要兩邊軸都需要顯示的情況。});chart.addSeries({    name: '降雨量',    type: 'column',    color: '#08F',    yAxis: 'precipitation',    data: precipitationDatas,    tooltip: {        valueSuffix: 'mm'    }});//動態刪除y軸。chart.get("precipitation").remove();

這個就是運行起來的圖。
OK， 就到這裡。