使用Jquery的json响应条形图

Question

我有一个AJAX调用，成功后会得到以下格式的JSON响应。其中JSON数组列的数量不变，但条目的数量可以增加。需要帮助使用jQuery将其绘制为条形图。

[
{
"amount": XX,
"instanceId": "XXX",
"timeStamp": XXX
},
{
"amount": XX,
"instanceId": "XX",
"timeStamp": XX
}
]

Answer 1

您应该显示到目前为止所尝试的代码，并就您遇到的问题提出特定问题。如果没有这些信息，很难提供合适的答案。话虽如此，我将提供一种使用JavaScript创建动态条形图的方法。

这种方法使用Chart.js，这是一个使用<canvas>元素的响应HTML5图表库。它们提供了一个条形图实现，您可以在这里找到它的文档。。首先要做的是将库包含到HTML文件中(首先下载并将其放在服务器上的目录中)：

<script src="Chart.js"></script>

然后，在HTML中添加一个画布元素，在其中显示图表：

<canvas id="myChart" width="400" height="400"></canvas>

现在，在您的JavaScript文件中，使用画布上下文创建图表对象：

var ctx = document.getElementById("myChart").getContext("2d");
var chartObject = new Chart(ctx);

然后，使用我们创建的图表对象，我们可以在上面调用Bar(data, options)工厂方法来创建条形图。Bar()方法接受两个参数：一个数据对象和一个选项对象。options对象允许您更改某些默认功能。数据对象是添加从AJAX调用中检索到的值的地方。

数据对象包含两个直接属性：标签和数据集；每个都是阵列。标签将显示在图形底部的水平方向，例如日期。数据集数组中的每个对象都将包含一个数据属性，该数据属性将是与同一索引处的标签相对应的特定条形图的y值。它们听起来可能令人困惑，但你一看就知道了：

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};

其中，两个对象数据数组的第一个索引将对应于标签数组中的第一个指数：条形图一在1月份为65，条形图二在1月份则为28

由于现在我们有了数据对象，我们现在可以创建条形图：

var barChart = chartObject.Bar(data); 

现在，只要你得到更多的数据，你就可以用以下方法添加：

// The values array passed into addData should be one for each dataset in the chart
barChart.addData([40, 60], "August");
// The new data will now animate at the end of the chart.

您甚至可以添加更多数据集：

barChart.datasets.push("data to push");

这应该会给你一个足够的开始。你只需要提供一些修改来适应你的场景。