使用 Knockout 数据绑定自动更新 ChartJS答案

【问题标题】：Automatically update ChartJS with Knockout data-bind使用 Knockout 数据绑定自动更新 ChartJS
【发布时间】：2014-09-13 15:45:55
【问题描述】：

我正在使用带有表单的 ChartJS。我想要做的是从字段中获取值以绘制特定的图表段。我想使用 Knockout 数据绑定来让图表在字段中的数字发生变化时刷新。

由于某种原因，当我输入数字时，它不会自动刷新。但是，当我输入一个数字并在浏览器中单击刷新时，该数字已保留。

谁能帮我实时更新绑定？

<body>
    <form>
        <input name="ValueStream" id="ValueStream" data-bind="value: ValueStream, valueUpdate: 'input'"></input>
        <input type="text" name="ProductService" id="ProductService" value="200">
        <input type="submit">
    </form>

    <div id="canvas-holder" style="width:30%">
        <canvas id="chart-area" width="300" height="300"/>
    </div>

    <script>
        var pAndS = document.getElementById("ProductService").value;
        var vS = document.getElementById("ValueStream").value;
        var polarData = [
            {
                value: pAndS,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: vS,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }
        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
                responsive:true
            });
        };
    </script>
</body>

【问题讨论】：

这里没有更新图表，它只在页面加载时绘制。您可以subscribe 更改您的视图模型，或写一个custom binding handler

标签： forms data-binding knockout.js chart.js

【解决方案1】：

Chart.js 仅在您调用该方法时绘制图表。您需要通过某种方式查看可观察对象何时发生变化，然后再次调用 PolarArea 方法。你可以试试这里提到的东西：Detecting change to Knockout view model。

【讨论】：

您不需要重新实例化图表等。有一个可用的 .update 方法：“在您的图表实例上调用 update() 将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些点。”
所以问题是 - 当视图模型发生变化时，如何连接以运行 .update？