仅更新Y轴-CanvasJS

Question

我有一个CanvasJS图表，其中我的X轴是静态的（下面的示例）

我想仅动态地更新Y轴，以便在用户查看图形时实时更新每个区域的值（即，如果Area 1变为20而不是10，则该图形将更新以反映这一点。）

下面是我到目前为止用于添加和更新数据的代码。刚才，当调用update函数时，如果进行了更改但X轴已重复，则不会在图形上添加更新的Y轴。

代码：

function addData(data) {
    for (var i = 0; i < data.length; i++) {
        dataPoints.push({
            label: data[i].area,
            y: data[i].number
        });
    }
    chart.render();
setTimeout(function(){updateYAxis(data)}, 5000);
}

function updateYAxis(data) {
  console.log("Update called");
  for (var i = 0; i < data.length; i++) {
    dataPoints.push({
      label: data[i].authority,
      y: data[i].attendanceRows
    });
  }
  setTimeout(function(){$.getJSON("http://localhost:8080/implementation/data/overflow.json", updateYAxis)}, 5000);
  chart.render();
}

更新后在屏幕上输出：

随着数据的更改，我如何编辑代码以仅更新Y轴？

示例数据：

[
  {
    "area": "Area 1",
    "number": 10
  },
  {
    "area": "Area 2",
    "number": 15
  },
  {
    "area": "Area 3",
    "number": 7
  },
  {
    "area": "Area 4",
    "number": 24
  }
]

编辑： 我已按要求添加了JsFiddle：

https://jsfiddle.net/8qf1Lk3c/