Highcharts的應用步驟

首先頁面引用JS

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

 

而後是你所須要的圖表樣式的JS（裏面包括數據）代碼

例如，個人是柱狀豎形圖

 <script>
    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '放心365甄選標準'
        },
        subtitle: {
            text: '放心365'
        },
        xAxis: {
            categories: ['鎘', ],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'mg/kg',
                align: 'high'
            }, 
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: 'mg/kg'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true,

        },
         
        credits: {
            enabled: false
        },
        series: [{
            name: '放心365標準:<=0.2',
            data: [0.2]
        }, {
            name: '國家標準:<=0.2',
            data: [0.2]
        }, {
            name: '歐盟標準:<=0.2',
            data: [0.2]
        }]
    });
});
  </script>

而後頁面里加上ID,及寬高就OK了

 <div id="container" style="min-width:400px; width:400px;height:400px"></div>

簡單吧，哈哈

 

固然，若是是柱狀橫向圖代碼以下

 <script>
    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '放心365甄選標準'
        },
        subtitle: {
            text: '放心365'
        },
        xAxis: {
            categories: ['鎘', ],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'mg/kg',
                align: 'high'
            }, 
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: 'mg/kg'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true,

        },
         
        credits: {
            enabled: false
        },
        series: [{
            name: '七河源長粒粳米:<=0.0067',
            data: [0.0067]
        },
        
        {
            name: '放心365標準:<=0.2',
            data: [0.2]
        }, {
            name: '國家標準:<=0.2',
            data: [0.2]
        }, {
            name: '歐盟標準:<=0.2',
            data: [0.2]
        }]
    });
});
  </script>

顯示效果以下

 

 

 

 橫向和豎向的區別在 type: 'column'（豎向柱形），仍是  type: 'bar'（橫向柱形）