如何使用動態csv-data顯示AmCharts餅圖？

我正在使用JS庫AmCharts在jQuery移動環境中顯示圖表。 AmCharts示例總是附帶一些寫在JS文檔中的靜態數據。我有一些我想要顯示的csv表。我已經設法通過串行和條形圖來做到這一點，但不知何故，我沒有設法用餅圖來做到這一點。如何使用動態csv-data顯示AmCharts餅圖？

任何人都可以幫忙嗎？

的index.html（相關部分在這裏我想插在div 「chartserialdiv4」餅圖）

<div data-role="page" id="page4" data-theme="d"> 
<div data-role="header"> 
    <h1>Kostenverteilung</h1> 
</div> 
<div data-role="content"><div id="chartserialdiv4" style="height: 500px;"></div></div> <!-- ****** DIV CONTAINER "CHARTSERIALDIV" ************ --> 
</div>

的JavaScript文件

window.onload = function() { 
    $(document).delegate('#page4', 'pageshow', function() { 
     createChartPie('chartserialdiv4'); 
     loadCSVPie("daten/kostenverteilung.csv"); 
     }); 
} 

// method which loads external data 
     function loadCSVPie(file) { 
      if (window.XMLHttpRequest) { 
       // IE7+, Firefox, Chrome, Opera, Safari 
       var request = new XMLHttpRequest(); 
      } 
      else { 
       // code for IE6, IE5 
       var request = new ActiveXObject('Microsoft.XMLHTTP'); 
      } 
      // load 
      request.open('GET', file, false); 
      request.send(); 
      parseCSVPie(request.responseText); 
     } 

// method which parses csv data 
     function parseCSVPie(data){ alert("parseCSV pie gestartet"); 
      //replace UNIX new lines 
      //data = data.replace (/\n/g, "\n"); 
      //replace MAC new lines 
      //data = data.replace (/\n/g, "\n"); 

      //split into rows 
      data = data.replace (/,/g,"."); // SUCHE NACH KOMMA UND ERSETZE DURCH PUNKT 

      var rows = data.split("\r"); // SUCHE NACH ZEILENUMBRUCH UND SPALTE DORT ZEILE AB 
      // create array which will hold our data: 
      dataProvider = []; 



      // loop through all rows 
      for (var i = 1; i < rows.length; i++){ // i=1 WEGEN DER ÜBERSCHRIFTEN 
       // this line helps to skip empty rows 

       if (rows[i]) {      
        // our columns are separated by semikolon 
       alert(i+". "+category+" "+value1); 
       var column = rows[i].split(";"); 

        // column is array now 
        // first item is date 
        var category = column[0]; 
        // second item is value of the second column 
        var value1 = column[1]; 
        // third item is value of the third column 
        //var value2 = column[2]; 
        //var value3 = column[3]; 

        // create object which contains all these items: 
        var dataObject = {category:category, value1:value1}; 

        // add object to dataProvider array 
        dataProvider.push(dataObject); 
       } 
      } 
      // set data provider to the chart 
      chart.dataProvider = dataProvider; 
      // this will force chart to rebuild using new data 
      chart.validateData(); 
     } 


function createChartPie(container){ 

       // PIE CHART 
chart = new AmCharts.AmPieChart(); 
       chart.titleField = "category"; 
       chart.valueField = "value1"; 
       chart.outlineColor = "#FFFFFF"; 
       chart.outlineAlpha = 0.8; 
       chart.outlineThickness = 2; 
     //chart.addTitle('Chart',12, '#000000', 1, true); 

       // this makes the chart 3D 
       chart.depth3D = 15; 
       chart.angle = 30; 
       //chart.labelsEnabled = false; 
       chart.visibleInLegendField = true; 
       chart.startEffect = ">"; 
       chart.labelRadius = -30; 
       chart.labelText = "[[percents]]"; 

     legend = new AmCharts.AmLegend(); 
           legend.borderAlpha = 0.3; 
           legend.horizontalGap = 10; 
           legend.switchType = "v"; 
           legend.position = "bottom"; 
           legend.align = "left"; 
           legend.labelText = "[[title]]"; 
           legend.valueText = ""; 
           chart.addLegend(legend); 

       // WRITE 
       chart.write(container); 

}

由於只有一個空白頁面顯示，我有這樣的感覺，從dataProvider的內容不饋送到div「chartserialdiv4」...

任何人都可以幫忙嗎？

非常感謝您提前！ Lisa

來源

2013-02-18 Lisa Pichert

這是一個相當古老的問題，也許你現在已經解決了它。幾個星期前，我開始使用amcharts，每當我得到一張空白圖表時，都是因爲dataProvider的格式錯誤而無法生成圖表。它是需要的準JSON格式。

來源

2013-04-26 08:52:53 user2301506

如何使用動態csv-data顯示AmCharts餅圖？

回答

相關問題