如何使用动态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饼图？

回答

相关问题