Question

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

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

                    }

                });
            }



        });

Answer 1

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

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

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

psize

像魅力一样！

感谢。何

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

1 个答案: