更新 xAxis 单个标签位置以打印 Highcharts答案

【问题标题】：Update xAxis individual label position for printing Highcharts更新 xAxis 单个标签位置以打印 Highcharts
【发布时间】：2020-01-13 11:03:44
【问题描述】：

当用户想要打印图表时，有没有办法更新特定的 xAxis 标签？

这是初始图表（具有自定义样式的倒列）。我用格式化函数创建了 xAxis 标签

 xAxis: {
        arrowOnEnd: true,
        labels: {
          x: 40,
          formatter: function() {
            if (this.isLast) { return 'Less Likely' }
            if (this.isFirst) { return 'More Likely' }
          }
        },

并且能够定位它们，因此看起来倒置的 xAxis 的值从 不太可能 到 更有可能 如下

 events: {
          load: function() {
            // https://stackoverflow.com/questions/51656849/xaxis-point-specific-label-positions
            const chart = this;
            Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
              if (!tick.isNewLabel && tick.isFirst) { tick.label.attr({ y: 25 })}
              if (!tick.isNewLabel && tick.isLast)  { tick.label.attr({ y: 590 })}
            });
          },

问题是我想打印图表时： xAxis 标签返回到其原始位置。

我尝试在 beforePrint 中复制 events: { load: ... } 逻辑或将“打印”事件包装到 highcharts 对象，但这似乎没有任何效果

 beforePrint: function() {
   const chart = this;
   Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
     if (tick.isFirst) { tick.label.attr({ y: 125 })}
     if (tick.isLast) { tick.label.attr({ y: 590 })}
   });
}

Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
      const chart = this;
      Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
        if (tick.isFirst) { tick.label.attr({ y: 25 })}
        if (tick.isLast)  { tick.label.attr({ y: 590 })}
      });
      proceed.call(this)
  });

我尝试了tickPositionier，但实际上无法弄清楚如何使其发挥作用。

值得一提。具有相同逻辑的 afterPrint 事件会重置图表，所以我不明白为什么一个事件正在工作（afterPrint）而另一个没有（打印）

 afterPrint: function() {
            const chart = this;
            Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
              if (tick.isFirst) { tick.label.attr({ y: 25 })}
              if (tick.isLast)  { tick.label.attr({ y: 590 })}
            });
          },

我在这里遗漏了什么吗？为什么我无法更新打印刻度位置？

旁注 - jsfiddle 给了我502 Bad Gateway，所以我无法在那里演示它

【问题讨论】：

标签： highcharts

【解决方案1】：

将加载事件更改为渲染应该可以解决图表在打印之前再次初始化的问题。

演示：https://jsfiddle.net/BlackLabel/4qbp1w0z/

  chart: {
    type: 'bar',
    events: {
      render: function() {
        // https://stackoverflow.com/questions/51656849/xaxis-point-specific-label-positions
        const chart = this;
        Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
          if (!tick.isNewLabel && tick.isFirst) {
            tick.label.attr({
              y: 20
            })
          }
          if (!tick.isNewLabel && tick.isLast) {
            tick.label.attr({
              y: 350
            })
          }
        });
      },
    }
  },

API：https://api.highcharts.com/highcharts/chart.events.render

【讨论】：