使用jquery响应json响应的条形图

我有一个AJAX调用，成功获取JSON响应，格式如下。 JSON数组列的数量没有变化但条目数量可以增加。需要使用jQuery将其作为条形图进行绘图的帮助。使用jquery响应json响应的条形图

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

来源

2015-04-29 Abhi.G

到目前为止你有什么？ –

看看canvas.js和chart.js。使图表和图表更容易处理的库。 – chRyNaN

我现在拥有的是一个静态栏聊天。但是我现在想从ajax调用中读取Json响应并绘制图表。 –

您应该显示您迄今为止尝试过的代码，并询问您遇到的问题的具体问题。没有这些信息很难提供合适的答案。话虽如此，我将提供一种使用JavaScript创建动态条形图的方法。

此方法使用Chart.js，它是使用<canvas>元素的响应式HTML5图表库。他们提供条形图实现，你可以找到它的文档here.。要做的第一件事就是包括图书馆到HTML文件（下载它，并把它放在你的服务器上的目录在前）：

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

然后，在你的HTML添加这些图表将显示一个canvas元素：现在

<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（）方法有两个参数：数据对象和选项对象。选项对象允许您更改某些默认功能。数据对象是您将添加从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] 
     } 
    ] 
};

如果双方的第一个索引对象数据阵列将对应的标签数组中的第一个索引：酒吧一月一次是在65和2月份的时间是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");

这应该给你足够的酸。您只需提供一些适合您的方案的更改。

来源

2015-04-29 22:53:48 chRyNaN

使用jquery响应json响应的条形图

回答

相关问题