csdn问鼎

大数据初学者

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}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {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>

效果图
这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22222499/article/details/53993231
文章标签: ajax highcharts
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Highcharts ajax加载数据实例

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭