Highcharts ajax加载数据实例

原创 2017年01月03日 12:07:53
  • 这里我只给出重要代码

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

效果图
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

highcharts与ajax的应用(补)

整理一份完整的例子,以供参考: 页面chart.html:       highchart折线图                ...

好用的数据highcharts中异步加载数据

未经允许,不得转载!! 水平有限,写的不周之处欢迎指正、交流!! 首先,Highcharts是什么呢?它是让数据可视化更简单,兼容IE6+、完美支持移动端、图表类型丰富、方便快捷的HTML5交互性...
  • ime33
  • ime33
  • 2017-01-11 13:00
  • 1744

jquery结合highcharts使用Ajax异步刷新数据

Highchart是比较流行的一款图形插件,可以生成常用的饼图、拆线图、柱状图,图形界面也比较美观。官网上也提供了一引demo,但是如何使用json给Hightcharts各部分赋值,我选择了用aja...

highcharts click事件获取数据传给datagrid ,动态加载数据

点击highcharts的柱子 会触发click事件,并将数据传给后台获取到相应部门下的所有员工信息显示在datagrid 如下:添加在charts的初始化里 plotOptions : { ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)