开发者社区> 问答> 正文

highcharts 下钻生成堆叠图?

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

展开
收起
蛮大人123 2016-06-02 14:43:34 2859 0
1 条回答
写回答
取消 提交回答
  • 我说我不帅他们就打我,还说我虚伪
    $(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
    }]}
    ]
    });
    });
    });
    2019-07-17 19:24:53
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
数据展现:可视化报表及嵌入应用 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载