Question

我正在使用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>

Answer 1

Chart.js仅在您调用方法时绘制图表。您需要某种方式来查看observable何时发生变化，然后再次调用PolarArea方法。您可以尝试类似于此处提到的内容：Detecting change to Knockout view model。

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

1 个答案: