关闭

Highcharts ajax加载数据实例

标签: ajaxhighcharts
471人阅读 评论(0) 收藏 举报
分类:
  • 这里我只给出重要代码

  • 思路是先通过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>

效果图
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:43610次
    • 积分:1674
    • 等级:
    • 排名:千里之外
    • 原创:128篇
    • 转载:9篇
    • 译文:0篇
    • 评论:8条
    博客专栏
    最新评论