从数据库更新 Chartjs 折线图答案

【问题标题】：Updating Chartjs Line chart from database从数据库更新 Chartjs 折线图
【发布时间】：2016-04-13 06:58:06
【问题描述】：

我有一个预先填充了服务器列表的下拉列表。当我选择一个并提交表单时，我可以从 mysql db 中检索 cpu load avg 的最后 12 个值的数组。

使用这些数据，我想更新下面的简单折线图：

<div> 
    <canvas id="cpuload" width="500" height="300"></canvas>
</div>

<script>

    $(function() {

        var cpudata = {

            labels: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9", "t10", "t11"],
            datasets: [{

                fillColor : "rgba(3, 169, 244, 0.4)",
                strokeColor : "rgba(3, 169, 244, 1)",
                pointColor : "rgba(3, 169, 244, 1)",
                pointStrokeColor : "#fff",
                data : [6,2,5,7,9,25,12,5,6,7,17,9]

            }]  
        }

        var ctx = $("#cpuload").get(0).getContext("2d");
        var myChart = new Chart(ctx).Line(cpudata, {
            bezierCurve: false
        });


    });

我查看了 Chartjs 文档并注意到一个 .update() 函数，它只允许更新 y 值。

我一直在试图找出访问 result_array 值的最佳方法（在 foreach 循环中以某种方式？）并将它们分配给每个 myChart.datasets[0].points[i].value （其中 i=0-11)，然后运行 update() 以便图表以新值呈现？

感谢指导，谢谢！

【问题讨论】：

标签： javascript php jquery chart.js

【解决方案1】：

一个更直接的解决方案（至少对我来说）：

在您的 draw_chart 方法中（或您调用的任何方法来绘制图表）：

if (typeof chart != 'undefined')
    chart.destroy();

如果有，则销毁现有图表。

从那里，只需添加您的数据集并绘制它。

此解决方案在 1.x 和 2.0 中均适用。

【讨论】：