Question

我正在尝试制作一个图表，显示两个不同的数据集。两者均在12个月内分发，但是一组数据仅与当月开始相关。

I have something like this example (JSFiddle)

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Temperature'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'Temperature (°C)'
    }
},
plotOptions: {
    column: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    }
},
series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
    name: 'London',
    data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
    pointStart: 1
}]

}）;

我的问题是我想在第二个数据开始之前用单列显示数据。

例如，在上面链接的JSFiddle中，我想将January设置为较宽的列，而不是将右侧为空白的细列。有可能吗？

感谢阅读。

Answer 1

例如，在上面链接的JSFiddle中，我想将1月设置为较宽的列，而不是较薄的列（在右侧保留空白）。有可能吗？

可以，但是需要一些自定义代码。更好的解决方案是将单列居中。

代码：

var maxGroupedColumns = 0;

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      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();
      }
    }
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      },
      grouping: false,
      pointRange: 1,
      pointPadding: 0.25,
    }
  },
  series: [{
    name: 'Tokyo',
    id: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'London',
    id: 'London',
    data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

演示： https://jsfiddle.net/wchmiel/1wph8ojx/3/

高图，图表以不同点开始于两个系列，如何显示单列？

1 个答案: