使用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元素，將在其中顯示圖表：

<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]
        }
    ]
};

兩個對象數據數組的第一個索引將與標簽數組中的第一個索引相對應： 1月份的第一個小節為65，一月份的第二個小節為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");

那應該給您足夠的開始。 您只需要提供一些更改即可適合您的情況。