Highcharts.SVGRenderer无法与“向下钻取”一起正常使用

Question

我的应用程序中有一个Highcharts柱形图，并且具有向下钻取行为。最初，它显示某事的年度明智计数，然后单击年份，则显示该年的每月视图。另外，该月度视图显示的是从12月到去年12月，因此我还有另一个要求，例如需要分开两年。本年度明智的分离应该仅按月查看。与下图类似。但是问题是，如果我在Highcharts的Drilldown事件内调用Separator添加方法，它不会按预期添加分隔符。我想要的是类似以下的内容。

如果我单击2018图，应该类似于以下内容。

Answer 1

您只能使用向下钻取事件在图表中保存正确的年份：

function renderSeparator(xVal, chart, year) {
  var xAxis = chart.xAxis[0],
    pxVal = xAxis.toPixels(xVal + 0.5);

  chart.additionalLabels.push(chart.renderer.path([
    'M', pxVal, chart.plotTop,
    'L', pxVal, chart.plotTop + chart.plotHeight
  ]).attr({
    stroke: 'black',
    'stroke-width': 1
  }).add());

  chart.additionalLabels.push(chart.renderer.text(
    year, pxVal + 10, 70
  ).css({
    color: 'black',
    fontSize: 20
  }).attr({
    zIndex: 6
  }).add());
}

// Create the chart
Highcharts.chart('container', {
  chart: {
    events: {
      drilldown: function(e) {

        e.target.drilldownYear = e.point.name;
      },
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          additionalLabels,
          year = Number(chart.drilldownYear);

        if (!chart.additionalLabels) {
          chart.additionalLabels = [];
        }

        if (chart.additionalLabels.length) {
          Highcharts.each(chart.additionalLabels, function(label) {
            label.destroy();
          });
          chart.additionalLabels = [];
        }

        Highcharts.each(xAxis.names, function(el, i) {
          if (el === "December") {

            if (!chart.additionalLabels.length) {
              chart.additionalLabels.push(chart.renderer.text(year, chart.plotLeft + 10, 70)
                .css({
                  color: 'black',
                  fontSize: 20
                })
                .attr({
                  zIndex: 6
                })
                .add());

              year++;
            }

            renderSeparator(i, chart, year);
            year++;
          }
        });
      }
    },
    type: 'column'
  },

  ...

});

实时演示：https://jsfiddle.net/BlackLabel/qtr5x1po/

相似的主题：Add Custom Labels to Axes in Highcharts