2 liu649983697 liu649983697 于 2016.03.01 18:05 提问

highcharts 下钻生成堆叠图?

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

3个回答

liu649983697
liu649983697   2016.03.02 17: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
}]}
]
});
});

});
liu649983697
liu649983697 for(){addSingleSeriesAsDrilldown(point,ddOptions);} applydrllDown()
接近 2 年之前 回复
liu649983697
liu649983697 for(){}
接近 2 年之前 回复
liu649983697
liu649983697 自己已解决。。。。直接不用addSeriesDrilldown(point,ddOptions),将这一句,改成
接近 2 年之前 回复
devmiao
devmiao   Ds   Rxr 2016.03.02 05:20
liu649983697
liu649983697 要说堆叠柱形图怎么画的话,highcharts中文网上什么图都有滴
接近 2 年之前 回复
liu649983697
liu649983697 你可能理解错误我的意思了。我是要下钻数据后,下钻出来的图是堆叠柱形图,不是说想知道堆叠柱形图怎么画的。
接近 2 年之前 回复
WuXiaoQuan824212
WuXiaoQuan824212   2016.03.02 09:29

图表样式

 $(function () {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      type: "column"
    },
    title: {
      text: null
    },
plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: false,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    },
    series: [{
       name: '新',
            color: '#FF3300',
            type: 'column',
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
    },{
       name: '循',
            color: '#009900',
            type: 'column',
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
    }
        ,{
       name: '备',
            color: '#FFFF33',
            type: 'column',
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
    }],
    xAxis: {
      categories: [{
        name: "2011年",
        categories: ["一", "二", "三"]
      }, {
        name: "2012年",
        categories: ["一", "二", "三"]
      }, {
        name: "2013年",
        categories: ["一", "二", "三"]
      }]
    }
  });
});
liu649983697
liu649983697 不是我要的,我要的是下钻后钻取的结果是堆叠,不是要知道堆叠图或者分组堆叠图怎么画。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!