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