javascript - 在 Chart.js 中使用和读取 Knockout.js 中的变量

Question

我使用 knockout.js 和 Jquery 从 IO 中提取 pd-Data 并不断更新它。我的目标是然后将其与 Chart.js 交叉以绘制随时间变化的 pd 数据。我的问题是我的图表没有更新任何数据。

我目前有用于将数据提取到单独的 .js 文件中的 API，但 Chart.js 位于 <script> 下html 文件中的标记。我尝试了几种不同的方法，例如用 id 标记并使用 document.getElementById()。到目前为止还没有运气。

setInterval(function() {
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  pdData = parseInt(document.getElementById("value").value);
  addData(window.myLine, time, pdData);
  removeData(window.myLine);
}, 3000);

function addData(chart, label, data) {
  config.data.labels.push(label);
  config.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  window.myLine.update();
}

function removeData(chart) {
  config.data.labels.pop();
  config.data.datasets.forEach((dataset) => {
    dataset.data.pop();
  });
  window.myLine.update();
}

如果需要，我可以从 API 脚本中添加更多内容，但我当前的问题是 pdData 没有加载值(或任何值)，并且图表没有随着时间的增加和数据的更新而更新。我收到的唯一错误是 .update()对于我创建的图表来说不是一个有效的函数。

Answer 1

您应该做的是为 ChartJS 创建一个自定义绑定(bind)处理程序:

ko.bindingHandlers.chartJS = {
    update: function (element, valueAccessor) {
        // do the chartJS stuff here
        // access the chart data by calling valueAccessor()
    }
};

然后你可以在模板中调用它，如下所示:

<canvas data-bind="chartJS: myChartData"></canvas>

其中 myChartData 是 View 模型上的(可观察的)属性。如果数据发生变化(通过 AJAX 调用)，您的图表将自动更新。