动态替换情节带

时间:2018-02-12 15:35:18

标签: javascript highcharts

我正在尝试动态替换我的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/)。

1 个答案:

答案 0 :(得分:2)

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