想要在 Highchart 基本柱形图中隐藏具有 0 值的列

Question

我试图隐藏具有零值和多个系列的列。给 null 对我不起作用，因为它给了我不想要的空间。作为我的数据示例，请参阅链接。我有类似的数据。

数据示例：http://jsfiddle.net/7dgd3aa7/1/

 Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Rainfall'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ],
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: 'Rainfall (mm)'
    }
},
tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    }
},

series: [{
    name: 'Tokyo',
    data: [49.9, 0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
    name: 'New York',
    data: [83.6, 78.8, 98.5, 0, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 
 },{     
     name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 0, 51.2]
 }, {   
    name: 'Berlin',
    data: [42.4, 0, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 0, 46.8, 51.1]
}]
 });

Answer 1

这种外观和行为可以通过禁用grouping、为每个点创建一个单独的系列并将pointPlacement应用于它们来实现。 pointPlacement 只能用于 series 对象 - 这就是分解的原因。

这是一个自动执行的代码：

  load: function() {
    var newSeriesArr = [],
      chart = this,
      groupedSeries = {},
      pointOffset;


    // create a new series for each point
    for (var i = chart.series.length - 1; i >= 0; i--) {
      var series = chart.series[i];

      var pointsInSeries = series.points.length;
      for (var j = pointsInSeries - 1; j >= 0; j--) {
        var point = series.points[j];

        // omit the point if its y value equals to 0 
        if (!point.y) {
          continue;
        }

        // make sure that x property of each point is initialized
        point.options.x = point.x;

        var newSeriesOptions = {
          data: [point.options],
          // move relevant options from the original series
          color: series.color,
          name: series.name,
          // linking series items in legend
          linkedTo: series.options.id
        };

        if (!groupedSeries[point.x]) {
          // create group
          groupedSeries[point.x] = [];
        }

        // create series and assign it to group
        groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));

        if (groupedSeries[point.x].length > maxGroupedColumns) {
          // update max grouped columns number
          maxGroupedColumns = groupedSeries[point.x].length;
        }

        point.remove(false);
      }

      //series.remove(false);
      series.setData([]);
    }

    // handle pointPlacement for each series
    pointOffset = 1 / maxGroupedColumns;
    for (var x in groupedSeries) {
      var group = groupedSeries[x];

      group.forEach(function(series, index) {
        series.update({
          pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
        }, false);
      });
    }

    chart.redraw();
  }

现场演示： http://jsfiddle.net/BlackLabel/1czqor6m/