Highcharts.SVGRenderer 无法正常使用向下钻取

Question

我的应用程序中有一个 Highcharts 柱形图，它具有向下钻取行为。最初，它显示某物的年度明智计数，然后在单击某一年时显示该年的月度视图。此外，该月度视图显示从 12 月到去年 12 月，所以我还有另一个要求，比如需要分开两年。今年明智的分离应该只出现在月度视图中。类似于下图的东西。但问题是如果我在 Highcharts 上的 Drilldown 事件中调用分隔符添加方法，它不会按预期添加分隔符。我想要的是像下面这样的东西。

如果我点击 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/

相似主题：

Highcharts.SVGRenderer 无法正常使用向下钻取

Highcharts.SVGRenderer not working properly with Drill Down

javascript

charts

highcharts

drilldown