min开发 2016-03-01 10:05 采纳率: 50%
浏览 1983
已采纳

highcharts 下钻生成堆叠图?

如题第一层的highcharts图表为柱状图(也可为其他),点击后下钻,下钻出来的图形需为堆叠柱状图(一维的柱状图图表,自己已实现,需要多维的堆叠柱状图)。

  • 写回答

3条回答 默认 最新

  • min开发 2016-03-02 09:03
    关注

    $(function () {
    var chart;
    $(document).ready(function() {

    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container',
    type: 'column',
    events:{
    drilldown: function (e) {
    if (!e.seriesOptions) {

    var data = {
    series: [{
    stacking: 'normal',
    type: 'column',
    name: 'MSIE versions 2000',
    data: [10, 7, 33, 2]
    },{
    stacking: 'normal',
    type: 'column',
    name: 'MSIE versions 2010',
    data: [1, 5, 10, 15]
    }]
    };
    chart.showLoading("加载中 ...");
    setTimeout(function () {
    chart.hideLoading();

    chart.addSeriesAsDrilldown(e.point, data.series[0]);
    //只能设置一条,直接设置data.series就不行了。
    //chart.addSeriesAsDrilldown(e.point, data.series);
    }, 1000);

    }
    }
    }
    },
    title: {
    text: '测试统计'
    },
    xAxis: {
    type:'category'
    },
    yAxis: {
    title: {
    text: '数量'
    }
    },
    credits:{//版权连接
    enabled:false
    },
    series: [{name: '浏览器',data: [{
    y: 55,
    drilldown: true
    }]},{name: '浏览器12',data: [{
    y: 35,
    drilldown: false
    }]}
    ]
    });
    });

    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
  • ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集