amCharts無法顯示數據？

我是新來的amCharts和JavaScript。我的HTML文件看起來像：amCharts無法顯示數據？

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="shortcut icon" href=""> 
    <title>chart created with amCharts | amCharts</title> 
    <meta name="description" content="chart created using amCharts live editor" /> 

    <!-- amCharts javascript sources --> 
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 
    <script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> 

    <!-- amCharts javascript code --> 
    <script type="text/javascript"> 
     AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "dataLoader": { 
       "url": "output.json", 
       "format": "json" 
      }, 
      "valueField": "count", 
      "titleField": "date" 
     }); 
    </script> 
</head> 

<body> 
    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div> 
</body> 

</html>

我的JSON文件：

[{ 
    "date": "2015-11-17", 
    "count": "1" 
}, { 
    "date": "2015-11-28", 
    "count": "1" 
}, { 
    "date": "2016-01-13", 
    "count": "1" 
}, { 
    "date": "2016-01-22", 
    "count": "1" 
}]

通過使用HTTP服務器-o，本地主機在Chrome瀏覽器中打開。 http://127.0.0.1:8080/test2.html

test2.html和output.json是在同一個目錄

我可以從chromeconsole看到，它加載JSON文件正確。

我無法弄清楚爲什麼數據沒有顯示在圖表中了。我嘗試瀏覽並查看其他示例，有點卡住。

來源

2016-12-02 ripudaman flora

您的圖表缺少幾條，您可以在amCharts site的任何行/列演示中找到。這裏是你想要的東西：

你錯過了一個graphs數組。這是系列圖表所必需的（它看起來像是從餅圖開始的，完全不同）。 graphs數組中的每個對象都包含一個valueField。
您的圖表缺少categoryField。
它看起來像你的數據有日期，所以你需要創建一個categoryAxis並將parseDates設置爲true。您還需要在圖表配置的頂層設置dataDateFormat字符串，以便圖表知道如何在所有瀏覽器中一致地解析日期。

假設你想要一個折線圖，這裏的最低限度makeChart呼叫，您需要爲您的數據：

AmCharts.makeChart("chartdiv", { 
     "type": "serial", 
     "dataLoader": { 
      "url": "output.json", 
      "format": "json" 
     }, 
     "graphs": [{ 
      "valueField": "count" 
     }], 
     "categoryField": "date", 
     "dataDateFormat": "YYYY-MM-DD", 
     "categoryAxis": { 
      "parseDates": true 
     } 
    });

Demo

來源

2016-12-02 19:37:03 xorspark

謝謝。是的，我的確從餅圖開始，然後進入折線圖：$ –

amCharts無法顯示數據？

回答

相關問題