Chart.js |使用“setInterval”刷新折线图时出现问题

Posted 2021-03-28

想知道是否有人可以帮助我。

我无法获得Chart.js LineChart（使用AJAX数据）刷新每个“X”秒。我试图将下面的代码放在setInterval中的函数中，尽管它确实刷新了，但它以“放大”的方式重绘自己...

我希望图表每10秒刷新一次。

码：

        $.ajax({
            type: "POST",
            url: '@Url.Action("ChartRT")',
            contentType: "application/json",
            dataType: "json",
            success:
            function (chartsdata_RT) {
                var aData = chartsdata_RT;
                var aLabels = aData.map(c => c.Period);
                var aDatasets1 = aData.map(c => c.FAILED);
                var aDatasets2 = aData.map(c => c.OTHER);
                var aDatasets3 = aData.map(c => c.DELIVERED);
                var aDatasets4 = aData.map(c => c.PENDING);
                var dataT = {
                    labels: aLabels,
                    datasets: [
                        {
                            label: "FAILED",
                            data: aDatasets1,
                            borderColor: '#ff0000',
                            backgroundColor: "rgba(255, 0, 0, 0.3)",
                            fill: 'true'
                        },
                        {
                            label: "OTHER",
                            data: aDatasets2,
                            borderColor: '#3366ff',
                            backgroundColor: "rgba(32, 162, 219, 0.3)",
                        },
                        {
                            label: "DELIVERED",
                            data: aDatasets3,
                            borderColor: '#009900',
                            backgroundColor: "rgba(0, 102, 0, 0.3)",
                        },
                        {
                            label: "PENDING",
                            data: aDatasets4,
                            borderColor: '#ff9900',
                            backgroundColor: "rgba(255, 153, 219, 0.3)",
                        }

                    ]
                };

                var ctx = $("#chart_last2hours").get(0).getContext("2d");
                ctx.canvas.height = "50";
                var myNewChart = new Chart(ctx, {
                    type: 'line',
                    data: dataT,
                    options: {
                        legend: {
                            display: true,
                            position: 'right',
                            fullWidth: false,
                            labels: {
                                fontColor: '#484848',
                                fontsize: 10,
                                boxWidth: 20,
                                padding: 5,
                                lineWideth: 0
                            }
                        }

                    }

                });
            }



        });

答案

结束了在函数（drawChartRT）中包装上面的代码。然后我：

1）调用函数drawChartRT（）来绘制LineChart。

2）在setInterval中删除并添加画布并调用函数drawChartRT（）。

    drawChartRT();
    setInterval(function () {
        $("canvas#chart_last2hours").remove();
        $("#chartdiv_rt").append('<canvas id="chart_last2hours" height="200"></canvas>');
        var div = document.getElementById("chart_last2hours");
        //console.log(div);
        drawChartRT();
    }, 10000);

奇迹般有效！

谢谢。何塞