Question

我想在网站上显示一个图表，该图表每2秒自动更新一次。

我不太了解JavaScript。我找到并尝试了以下示例： https://blog.heimetli.ch/chart-js-update.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <table>
     <tr ng-repeat="c in myData" ng-form="x">
        <td>
          <select ng-model="c.type" ng-options="option for option in types" ng-required="true"></select>
        </td>
        <td>
           <input type="text" ng-model="c.text" ng-required="true" />
        </td>
        <td ng-class="{'has-error': x.$invalid}">
          form is valid: {{x.$valid}}
        </td>
    </tr>
  </table>
</div>

不幸的是，我还没有设法从示例（链接）中更改代码，以便它可以在我的代码中使用。我需要做什么？

我希望我的代码每2秒自动更新一次。感谢您的宝贵时间：）

Answer 1

JavaScript的setInterval()是一种非常实用（但效率不高）的解决方案。

这里是一个例子：

setInterval(function() {
    let getData = $.getJSON('/value');
    getData.done(function(result) {

        var zeit = result.zeit;
        var flow = result.flow;
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: zeit,
                datasets: [{
                    data: flow,
                    label: "Flow>",
                    borderColor: "#0004cd",
                    fill: false
                }, ]
            }
        });
    });
}, 2000) // 2000 milliseconds = 2 seconds

这将从您通过AJAX提供的源中获取信息，并在每次请求后执行您用于首次渲染的相同代码。

此方法的问题在于，每次更新图表时，都会向您指定的服务器生成一个请求。

如何每2秒自动更新一次Chart.js？

1 个答案: