计算 Y 轴中断

问题描述

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

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

With data of 

[180,220,450,562]

现在，当我们使用的数据是静态的时，这很有效，但在我们的例子中显然不是。我们取回的数据来自另一项服务，并且差异很大。

可以得到highcharts计算出的yaxis的最小值吗？

我可以引入一个从 0 到计算出的最小值的间隔吗？

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

CodeSandbox

我这样做主要是因为我们需要添加图片中的swigly

解决方法

首先 - 您似乎错过了导入 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

highcharts highcharts react-highcharts