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