Highcharts的应用步骤

时间 2019-12-09

标签 highcharts 应用步骤繁體版

原文原文链接

首先页面引用JSjavascript

<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（里面包括数据）代码java

例如，个人是柱状竖形图jquery

 <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了spa

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

简单吧，哈哈3d

固然，若是是柱状横向图代码以下code

 <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>

显示效果以下cdn

横向和竖向的区别在 type: 'column'（竖向柱形），仍是 type: 'bar'（横向柱形）blog