Highcharts - svg 与数字答案

【问题标题】：Highcharts - svg vs digitalHighcharts - svg 与数字
【发布时间】：2020-01-20 19:01:07
【问题描述】：

我一直在尝试对加载图表进行一些不寻常的操作。使用 svg 渲染器，我创建了包含文本元素的组元素。然后，我计算了每个组元素（标题，学分）的高度，现在，我正在尝试根据这些计算更新 SpacingTop/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);

      }
      }
    },

【问题讨论】：

标签： highcharts

【解决方案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

【讨论】：