2012-12-11 3 views
1

동적 JSON을 사용하여 jqplot 위젯을 렌더링하려고하는데 어떻게해야 하는지를 찾을 수 없습니다.jqplot에서 json 데이터를 렌더링하는 방법

유일한 예 나는 파일에서 JSON을 읽는 포함 보았다하지만 예를 들어 문자열로 JSON을 사용하려면 :

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

어떤 생각?

+0

무엇을 시도 했습니까? 그래서 비슷한 질문을 본 적이 있습니까? http://stackoverflow.com/questions/11141434/plotting-json-data-using-jqplot http://stackoverflow.com/questions/10514311/constructing-json-for-jqplot-bar-charts –

+0

나는 그랬지만 그들은 동적 JSON 문자열에서 필요한 동안 파일/URL에서 JSON에 대해 얘기합니다. – zohar

+0

좋아, 네가 알아 들었어. 내 대답 –

답변

3

질문에있는 데이터는 문자열이 아니며 자바 스크립트 개체 리터럴입니다.

당신이 오렌지, 사과 당신은 아마 막대 차트를 그릴 할 것바나나가있는 경우;

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 
     } 
    } 
}); 
+0

이 작동하지 않는지 확인하십시오. 전체 페이지/html 코드로 질문을 편집 할 수 있습니까? – zohar

+0

작동하지 않는 기능은 무엇입니까? 나는'line1'이 옳다는 점을 감안하여 차트를 렌더링 할 수 있어야한다. (두 번째 부분은 jqPlot 웹 사이트에서 복사 한 스 니펫이므로 필요에 따라 수정한다.) –

+0

차트가 표시되지 않는다. 제목 'Fruits' – zohar

0
$.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], { ..... 

이 jqplot 사용할 수있는 배열에 JSON 데이터를 변환하는 방법 좋은 exemple입니다 ...

: 당신은 개체의 레이블과 값을 추출하고 차트를 그릴해야합니다
관련 문제