计算 Y 轴中断答案

【问题标题】：Calculate Y-axis breaks计算 Y 轴中断
【发布时间】：2020-12-18 23:25:35
【问题描述】：

当 y 轴上的第一个值不为 0 时，我们有一个 UI 要求，即在图表中引入一个中断。自然地，我开始将 yAxis 最小值设置为 0，然后我决定在 y 中引入一个中断-轴。这是相关选项

yAxis: {
    lineWidth: 2,
    min: 0,
    breaks: [
      {
        from: 0,
        to: 100
      }
    ]
  }

With data of 

[180, 220, 450, 562]

现在，当我们使用的数据是静态的时，这很有效，但显然在我们的情况下它不是。我们返回的数据来自另一个服务，并且变化很大。

能否得到由highcharts计算的y轴的最小值？

我可以引入从 0 到计算出的最小值的中断吗？

你们可以看到我到目前为止所做的工作：

CodeSandbox

我这样做主要是因为我们需要添加如图所示的 swigly

【问题讨论】：

标签： highcharts react-highcharts

【解决方案1】：

首先 - 您似乎错过了导入 broken-axis 模块。

import HighchartsBrokenAxis from "highcharts/modules/broken-axis";

HighchartsBrokenAxis(Highcharts);

接下来，我想提出另一个解决方案 - 使用 render 回调来检查 yAxis.minData 并在 yAxis 上进行更新。

chart: {
  events: {
    render() {
      const chart = this,
        yAxis = chart.yAxis[0],
        dataMin = yAxis.dataMin;

      if (chartForRender) {
        chartForRender = false;
        yAxis.update({
          breaks: [
            {
              from: 1,
              to: dataMin
            }
          ]
        });
      }
      chartForRender = true;
    }
  }
},

请注意，我使用chartForRender 标志来确保更新调用只会被触发一次。

演示：https://stackblitz.com/edit/react-jr5bjw?file=index.js

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

API：https://api.highcharts.com/class-reference/Highcharts.Axis#update

【讨论】：