javascript - 动态替换绘图带

我正在尝试在Highcharts量规中动态替换系列数据和绘图带。到目前为止，我已经设法动态地更改了系列数据，但是我一直在努力更换频段。这是我尝试过的：

let highchartsChartOptions = {
  "chart": {
    "type": "gauge",
    "renderTo": "chart"
  },
  "series": [{
    "data": [247600]
  }],
  "yAxis": {
    "plotBands": [{
      "from": 156700,
      "to": 277150,
      "color": "#ff0000",
    }, {
      "from": 277150,
      "to": 386100,
      "color": "#00ff00"
    }],
    "min": 100000,
    "max": 400000
  },
  "pane": {
    "background": null,
    "startAngle": -90,
    "endAngle": 90
  }
};



let seriesData = [
  [226800],
  [247600]
];


let seriesBands = [
  [{
    "from": 156700,
    "to": 277150,
    "color": "#ff0000",
  }, {
    "from": 277150,
    "to": 386100,
    "color": "#00ff00"
  }],
  [{
    from: 100000,
    to: 250000,
    "color": "#ff0000"
  }, {
    from: 250000,
    to: 400000,
    "thickness": 15,
  }]
];

const replacePlotBand = (axis, id, replacement) => {
  axis.removePlotBand(id);
  axis.addPlotBand(replacement);
};

let chart = new Highcharts.Chart(highchartsChartOptions);

let flip = true;
$("#change").on("click", () => {
  chart.series[0].setData(seriesData[flip ? 0 : 1]);
  chart.xAxis[0].update({
    plotBands: seriesBands[flip ? 0 : 1]
  });
  chart.redraw(true);
  flip = !flip;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-more.src.js"></script>

<div id='chart' style="width: 800px; height: 500px;"></div>
<button id="change">Change data</button>

我的意图是用一组不同的数据替换序列数据和绘图带，但是现在似乎仅序列数据被更新。

我不确定我在做什么错。

我还尝试过将ID添加到乐队并执行以下操作：

chart.xAxis[0].removePlotBand('band1');
chart.xAxis[0].removePlotBand('band2');
chart.xAxis[0].addPlotBand(seriesBands[flip ? 0 : 1][0]);
chart.xAxis[0].addPlotBand(seriesBands[flip ? 0 : 1][1]);

但这也不起作用（请参见小提琴https://jsfiddle.net/yc2gnp7x/2/）。

最佳答案

您的highChartOptions使用yAxis，但是您要删除并添加到xAxis