使用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響應的條形圖

回答

相關問題