从数据库更新Chartjs折线图

时间:2016-04-12 16:53:08

标签: javascript php jquery chart.js

我有一个预先填充了服务器列表的下拉列表。当我选择一个并提交表单时,我可以从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(),以便图表呈现新值?

感谢指导,谢谢!

1 个答案:

答案 0 :(得分:0)

更直接的解决方案(至少对我来说):

draw_chart方法中(或您要求绘制图表的任何内容):

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

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

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

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