2013-12-10 91 views
0

網絡API調用的<cfoutput>#cfhttp.FileContent#</cfoutput>正在生產輸出如下:訪問複雜的JSON數據

[ 
    { 
     "date": "2013-12-08", 
     "open": { 
      "Webmail": 6717, 
      "Phone": 8086, 
      "Other": 1224, 
      "Tablet": 2374, 
      "Desktop": 1967 
     } 
    }, 
    { 
     "date": "2013-12-09", 
     "open": { 
      "Webmail": 15213, 
      "Phone": 18445, 
      "Other": 2968, 
      "Tablet": 3944, 
      "Desktop": 5014 
     } 
    }, 
    { 
     "date": "2013-12-10", 
     "open": { 
      "Webmail": 432, 
      "Phone": 403, 
      "Other": 39, 
      "Tablet": 115, 
      "Desktop": 106 
     } 
    } 
] 

我想知道,是否有可能訪問Web郵件,電話等,以便繪製amchart提到平板在下面的jsfiddle:

http://jsfiddle.net/amcharts/TQxYB/

+0

有你看着的ColdFusion圖表cfchart標籤? –

+0

我不想使用cfchart標籤,但使用amchart。 – Jack

回答

2

雅,我們可以訪問其孩子的JSON中。 你只需要運行for循環。 我試過一個演示,希望你能得到一些幫助。

http://jsfiddle.net/qthpt/

var chart; 
var legend; 

var json = [ 
     { 
      "date": "2013-12-08", 
      "open": { 
       "Webmail": 6717, 
       "Phone": 8086, 
       "Other": 1224, 
       "Tablet": 2374, 
       "Desktop": 1967 
      } 
     }, 
     { 
      "date": "2013-12-09", 
      "open": { 
       "Webmail": 15213, 
       "Phone": 18445, 
       "Other": 2968, 
       "Tablet": 3944, 
       "Desktop": 5014 
      } 
     }, 
     { 
      "date": "2013-12-10", 
      "open": { 
       "Webmail": 432, 
       "Phone": 403, 
       "Other": 39, 
       "Tablet": 115, 
       "Desktop": 106 
      } 
     } 
    ]; 
var chartData = []; 
     for (var i = 0; i < json.length; i++) { 
      chartData.push({ 
       "date":json[i].date, 
       "webmail":json[i].open.Webmail 
      }); 
     } 



AmCharts.ready(function() { 
    // PIE CHART 
    chart = new AmCharts.AmPieChart(); 
    chart.dataProvider = chartData; 
    chart.titleField = "date"; 
    chart.valueField = "webmail"; 
    chart.outlineColor = "#FFFFFF"; 
    chart.outlineAlpha = 0.8; 
    chart.outlineThickness = 2; 
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>"; 

    // WRITE 
    chart.write("chartdiv"); 
});