Question

我有一个预先填充了服务器列表的下拉列表。当我选择一个并提交表单时，我可以从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文档并注意到了一个允许仅更新y值的.update（）函数。

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

感谢指导，谢谢！

Answer 1

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

在draw_chart方法中（或您要求绘制图表的任何内容）：

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

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

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

此解决方案适用于1.x和2.0。

从数据库更新Chartjs折线图

1 个答案: