javascript - 如何创建动态 JSON 对象以填充 DB 中的值以绘制 Canvas 图表？

Question

该项目的要求是使用 Canvas 绘制条形图/饼图。到目前为止，我已经使用一些静态值创建了图表。但要求是动态地从 MySQL 数据库服务器获取这些值。我听说 JSON 对象将用于交换数据。

谁能分享一个关于如何从任何数据库服务器填充 JSON 对象的值的示例？

Answer 1

只需从服务器获取 json 并使用 JSON.parse 解析它。

用于绘制画布图表。

你可以使用这个库 javaScript plotting for jQuery - http://www.flotcharts.org/

它将帮助您通过 JSON 数据绘制图表。

• 对于 ajax 更新 - http://www.flotcharts.org/flot/examples/ajax/index.html
• 实时更新 - http://www.flotcharts.org/flot/examples/realtime/index.html

示例静态图 - http://www.flotcharts.org/flot/examples/basic-usage/index.html

    var d1 = [];
    for (var i = 0; i < 14; i += 0.5) {
        d1.push([i, Math.sin(i)]);
    }

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // A null signifies separate line segments

    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot("#placeholder", [ d1, d2, d3 ]);

希望这有帮助！

Answer 2

在服务器端从数据库中选择您的数据。在页面请求中将数据作为 JSON 字符串返回。

可以使用 jquerys ， getJSON 函数来获取，然后绘制图形。

$.getJSON('pieinfo',function(data){
   var option = {
    series : {
       pie : {
         show:true
       }
    }
   };
   $.plot('#placeholder', data, option);
});