如何呈現jqplot

JSON數據我想渲染動態JSON jqplot小部件，我無法找到如何做到這一點。如何呈現jqplot

唯一的例子，我看到包括從文件中讀取JSON，但我想用JSON字符串作爲例如：

{"oranges":"10","apples":"20","bananas":"6"}

什麼想法？

來源

2012-12-11 zohar

你有什麼嘗試？你看到過這些類似的問題嗎？ http://stackoverflow.com/questions/11141434/plotting-json-data-using-jqplot http://stackoverflow.com/questions/10514311/constructing-json-for-jqplot-bar-charts –

我沒有，但他們從文件/網址談論JSON，而我需要從動態JSON字符串 – zohar

好吧，我明白了你的觀點。請檢查我的回答 –

在你的問題中的數據不是字符串，這是一個JavaScript對象字面。

如果你有橘子，蘋果和香蕉你可能想畫一個柱狀圖;你需要提取對象的標籤和值，然後繪製圖表：

var chart_data = {"oranges":"10", "apples":"20", "bananas":"6"}; 
var line1 = []; 
for (var prop_name in chart_data) { 
    line1.push([prop_name, chart_data[prop_name]]) 
} 
// line1 should be [["oranges", 10], ["apples", 20], ["bananas", 6]] 


// code snippet from http://www.jqplot.com/tests/rotated-tick-labels.php 
// please change it as you need 
var plot1 = $.jqplot('chart1', [line1], { 
    title: 'Fruits', 
    series: [{renderer:$.jqplot.BarRenderer}], 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer 
    }, 
    axes: { 
     xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
});

來源

2012-12-11 09:59:24

它不工作。你可以請用整頁/ html代碼編輯問題嗎？ – zohar

什麼不起作用？我很確定'line1'是正確的，你應該能夠渲染圖表（第二部分是我從jqPlot網站複製的代碼片段，請根據需要修改它） –

圖表不顯示標題'水果' – zohar

$.getJSON(url,"json").success(function(data) { 
var line1 = []; 
var content = $.parseJSON(data); 
$.each(content, function(index, item) { 
     line1.push([item.date, item.value]) 
}); 

var plot1 = $.jqplot("chart1",[line1], { .....

這是一個很好爲例如何將JSON數據轉換成陣列誰jqplot可以使用...

來源

2013-04-22 14:34:59

如何呈現jqplot

回答

相關問題