Highcharts ajax加载数据实例

  • 这里我只给出重要代码

  • 思路是先通过ajax请求数据库数据,返回回来数组,我这里以servlet为例。就知道url啥意思了。

<script>
$(function () {
     var le=new Array();
     $.ajax({
         url: 'le',        //
         dataType: "json",
         type:"post",
         async:false,
         success: function (data) {
             le=data
             }
     });
    Highcharts.chart('container1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '等级只有ABCD'
        },
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: '等级',
            colorByPoint: true,
            data: [{
                name: 'A',
                y: le[0]
            }, {
                name: 'B',
                y: le[1],
                sliced: true,
                selected: true
            }, {
                name: 'C',
                y:le[2]
            }, {
                name: 'D',
                y: le[3]
            }]
        }]
    });
});
script>

效果图
Highcharts ajax加载数据实例_第1张图片

你可能感兴趣的:(前端)