Question

我正在使用JS库AmCharts在jQuery移动环境中显示图表。 AmCharts示例总是带有一些在JS文档中编写的静态数据。我有一些我想要显示的csv表。我已经设法用串行和条形图来做到这一点，但不知怎的，我没有设法用饼图来做。

有人可以帮忙吗？

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”......

有人可以帮忙吗？

非常感谢您提前！莉莎

Answer 1

这是一个很老的问题，也许你现在已经解决了。几周前我开始使用amcharts，每当我得到一张空白图表时，都是因为dataProvider的格式错误而无法生成图表。它是必需的准json格式。

如何使用动态csv-data显示AmCharts饼图？

1 个答案: