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-400px; 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'（横向柱形）