Highcharts-svg vs digital

Question

我一直在尝试对加载的图表进行一些不寻常的操作。使用svg渲染器，我创建了带有文本元素的组元素。然后，我计算了每个组元素（标题，学分）的高度，现在，我试图基于这些计算来更新intervalTop / spacingBottom。（请不要问为什么我不使用原生highcharts标题和学分： ））另外，我需要扩展每个Y轴网格线，以便它们从零开始。但是，当我这样做时，我发现图表不会在浏览器中扩展这些网格线，而是可以在导出的svg中正常工作。有人可以解释为什么会发生这种情况，以及如何使它随后在浏览器中显示。

谢谢你！附言当我不使用chart.update函数时，网格线确实会以数字形式扩展。

这里是简单的实现：https://jsfiddle.net/sabira/x2uc6809/20/请下载png || svg以比较浏览器版本和图像。

chart: {
        events: {
        load: function(){
          const chart = this;
          const {yAxis} = chart;

          const [headingsHeight, creditsHeight] = [50, 60];

          chart.update({
            chart: {
              spacingTop: 10 + headingsHeight,
              spacingBottom: 11 + creditsHeight,
            },
          });

          const { gridGroup } = yAxis[0];

          const gridLines = findEls(gridGroup, 'path');

          [...gridLines].forEach(extendGridLine);

      }
      }
    },

Answer 1

这是由更新动画引起的，它使您的代码异步。您可以通过以下方式禁用它：

    chart.update({
      chart: {
        spacingTop: 10 + headingsHeight,
        spacingBottom: 11 + creditsHeight,
      },
    }, true, false, false);

---

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

API参考： https://api.highcharts.com/class-reference/Highcharts.Chart#update