amCharts無法顯示數據？

Question

我是amCharts和javascript的新手。 我的html文件如下所示：

<!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-server -o，本地主機將在Chrome瀏覽器中打開。 http://127.0.0.1:8080/test2.html

test2.html和output.json在同一目錄中

我可以從chromeconsole中看到它正在正確加載json文件。

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

Answer 1

您的圖表缺少一些可以在amCharts網站上的任何行/列演示中找到的圖表。 這是您所缺少的：

您缺少一個graphs數組。 這對於串行圖是必需的（看起來就像是從餅圖開始的，這是完全不同的）。 graphs數組中的每個graph對象都包含一個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
        }
    });

演示版

amCharts無法顯示數據？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-12-02 19:37:03

amCharts無法顯示數據？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-12-02 19:37:03

解決方案1
1 已采納 2016-12-02 19:37:03