簡體   English   中英

無法將數據從.CSV文件加載到Amcharts

[英]Cannot load data from .CSV file to Amcharts

我是JavaScript新手,正在創建一個餅圖,該餅圖從逗號分隔的文件data.txt中加載數據,但是打開html文件時,瀏覽器中看不到任何內容。

data.txt包含以下數據-

美國9252
中國1882
日本,1809年
德國1322
英國,1122年
印度984

我的html代碼是-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>amCharts examples</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="amcharts/amcharts.js" type="text/javascript"></script>         
    <script type="text/javascript">
        var chart;
        var dataProvider;

        window.onload = function() {
        createChart();            
        loadCSV("data.csv");                                    
    }

    // method which loads external data
    function loadCSV(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();
        parseCSV(request.responseText);
    }

    // method which parses csv data
    function parseCSV(data){ 
        //replace UNIX new lines
        data = data.replace (/\r\n/g, "\n");
        //replace MAC new lines
        data = data.replace (/\r/g, "\n");
        //split into rows
        var rows = data.split("\n");
        // create array which will hold our data:
        dataProvider = [];

        // loop through all rows
        for (var i = 0; i < rows.length; i++){
            // this line helps to skip empty rows
            if (rows[i]) {                    
                // our columns are separated by comma
                var column = rows[i].split(",");  

                // column is array now 
                // first item is date
                var country = column[0];
                // second item is value of the second column
                var visits = column[1];
                // third item is value of the fird column 


                // create object which contains all these items:
                var dataObject = {country:country, visits:visits};
                // 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 createChart(){   // PIE CHART
            chart = new AmCharts.AmPieChart();

            // title of the chart
            chart.addTitle("Visitors countries", 16);


            chart.titleField = "country";
            chart.valueField = "visits";
            chart.sequencedAnimation = true;
            chart.startEffect = "elastic";
            chart.innerRadius = "30%";
            chart.startDuration = 2;
            chart.labelRadius = 15;
            chart.pullOutEffect = "elastic";
            chart.pullOutDuration = 1;


            // the following two lines makes the chart 3D
            chart.depth3D = 10;
            chart.angle = 15;

            // WRITE                                 
            chart.write("chartdiv");
        }
    </script>
</head>

<body>
    <div id="chartdiv" style="width:600px; height:400px;"></div>
</body>

我已從http://blog.amcharts.com/2011/03/amcharts-javascript-tutorials-part-2.html提取了代碼,並根據餅圖進行了更改。 請告訴我我在做什么錯。 我已將data.txt與html文件放置在同一文件夾中,並且尚未將文件托管在網絡服務器上

您正在調用loadCSV來加載data.csv,但是您說數據在data.txt中。

您應該嘗試更新JS,Chrome會拋出此錯誤:
"AmCharts.AmPieChart is not a functioncreateChart @ Pie Charts.html:75window.onload @ Pie Charts.html:15"
嘗試使用DATALOADER:

AmCharts.makeChart("chartdiv", {
      "type": "pie",
      "dataLoader": {
        "url": "data/pie.csv",
        "format": "csv",
        "delimiter": ",",
        "useColumnNames": true
     },

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM