Question

我研究它后如何能做到这一点无效。我在页面上有2个元素，使用chart.js框架的图表和包含数据的表格。图表数据每天只更改一次，并且数据检索速度很慢，因此只需更改一次。另一方面，我想通过一组不同的折线图来改变每个 x 秒数。我在考虑使用iframe来做到这一点，但是iframe用于文档而不是html元素。经过进一步的研究，我发现jquery可能是最好的，但在jquery中没有经验。

我的问题是，jquery可以使用数组位置ID，并使用它们每隔x秒加载页面上的下一个图形，这就是我的图形部分的格式化方式

＆＃13;

<section id="graph">
    <div class="container col-xs-12 col-sm-12 col-md6 col-lg-7 col-xl-12">
        <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <h3 class="text-center text-uppercase">Graph X</h3>
        </div>
        <canvas id="canvas"></canvas>
        <div class="text-center text-uppercase text-info">
            <h5>X values correspond to the hours of the day starting from
    						______ ending with _____</h5>
        </div>
        <script>
            function getHours(days) {
                var data = [];
                var hour = 0;
                for (i = 0; i < (25 * days); i++) {
                    if (hour > 24) {
                        hour = 0;
                        data.push(hour);
                        hour = hour + 1;
                    } else {
                        data.push(hour);
                        hour = hour + 1;
                    }
                }
                return data;
            }

            function getData() {
                return data;
            }

            function gennum() {
                document.write((Math.random() * (50 - 10) + 10)
                    .toFixed(2));
            }
            var randomScalingFactor = function() {
                return Math.round(Math.random() * 100)
            };
            var lineChartData = {
                labels: getHours(2),
                datasets: [{
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,1)",
                        strokeColor: "rgba(105,105,105,1)",
                        pointColor: "rgba(255,0,0,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: getData(),
                    },

                ]

            }

            window.onload = function() {
                var ctx = document.getElementById("canvas").getContext(
                    "2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    scaleShowGridLines: true,
                    responsive: true,
                    datasetFill: true,
                    scaleShowGridLines: true,
                    scaleGridLineColor: "rgba(105,105,105,.5)",
                    bezierCurveTension: .25,

                });
            }
        </script>
    </div>
</section>

＆＃13;

或者对如何做到这一点的任何其他建议将非常感激。

Answer 1

基本上，要在x秒内运行函数，请使用setTimeout

setInterval( function () {                        
    //do magic here every 2seconds
}, 2000);

要更新chart.js数据，请参阅此answer

每20秒更改一次部分元素

1 个答案: