javascript - 动态替换绘图带

Question

我正在尝试动态替换 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]);

但这也不起作用(参见 fiddle https://jsfiddle.net/yc2gnp7x/2/ )。

Answer 1

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