javascript - 如果 highcharts 中的值为 0，则每列的动态宽度

Question

我是 highcharts 插件的新手，如果值为空，我需要为每列设置不同的宽度。

series: [{   
 name: 'Jane',
  data: [1, 0, 4]
 }, {
  name: 'John',
  data: [5, 7, 3]
 }]

我需要这样显示

I need this

我一直在搜索文档，但没有找到任何没有大量代码的东西。

我实现了这个，但它不会动态上传/调整大小。

http://jsfiddle.net/5vgjztk0/

谢谢

Answer 1

您可以使用类似 merimekko 图表的东西。

(function(H) { 
    var each = H.each;

       var xStart = 0;
var rememberX = 0;       
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        var series = this;
        if(series.data.length > 0 ){
            each(this.data, function(point) {
                point.shapeArgs.width = series.xAxis.translate(point.x) - series.xAxis.translate(xStart);
                point.shapeArgs.x = series.xAxis.translate(point.x) - point.shapeArgs.width; 
                xStart = point.x;
            });
            xStart = 0;
        }
        proceed.call(this);
    })
})(Highcharts)

演示:

• > http://jsfiddle.net/js55fuo1/24