highcharts的用法

//須要導入的js包

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="../js/highcharts.js"></script>

<script type="text/javascript" src="../js/modules/exporting.js"></script>

//顯示圖形的層

<div id="container" style="min-width: 300px; height:250px; max-width:200px; margin: 0 auto;float:left"></div>

//這個是把數據先裝在這個層裏面隱藏起來不讓其顯示，方便js調用

<div style="display: none;" id="dt1">${data1}</div>

//主要的js

$(function () {

var t=$.parseJSON($("#dt1").text());

    $(document).ready(function () {

   

        // Build the chart

        $('#container').highcharts({

        lang:{

           printChart:"打印圖表",

               downloadJPEG: "下載JPEG 圖片",  

               downloadPDF: "下載PDF文檔"  ,

              downloadPNG: "下載PNG 圖片"  ,

              downloadSVG: "下載SVG 矢量圖"  ,

              exportButtonTitle: "導出圖片"  

           },            

       chart: {

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false,

                type: 'pie'

            },

            title: {

                text:'民情上報狀況'

            },

            tooltip: {

                pointFormat: '{series.name}: <b>{point.y}條{point.percentage:.1f}%</b>'

            },

            plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: false

                    },

                    showInLegend: true

                }

            },

            series: [{

                name: "比例",

                colorByPoint: true,

                data: t

               

            }]

        });

    });

});

正確的數據格式：

{"data1":[{"id":"661","name":"巴山鎮","y":129},{"id":"662","name":"巨亭鎮","y":0},{"id":"663","name":"胡家壩鎮","y":0},{"id":"665","name":"安樂河鎮","y":0},{"id":"666","name":"鐵鎖關鎮","y":0},{"id":"667","name":"毛壩河鎮","y":0},{"id":"668","name":"陽平關鎮","y":0},{"id":"669","name":"胡家貝鎮","y":0},{"id":"670","name":"大安鎮","y":0},{"id":"671","name":"太陽嶺鎮","y":0},{"id":"672","name":"燕子砭鎮","y":0},{"id":"673","name":"高塘鎮","y":0},{"id":"674","name":"二郎壩鎮","y":0},{"id":"675","name":"廣坪鎮","y":0},{"id":"676","name":"舒家壩鎮","y":0},{"id":"677","name":"青木川鎮","y":0},{"id":"678","name":"代家壩鎮","y":0},{"id":"680","name":"禪家巖鎮","y":0}],"code":"success"}

data1格式在次說明y的值要封裝成int，避免發生錯誤

更多就請參照下載的highchars源代碼，裏面內容豐富各類統計圖