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 site的任何行/列演示中找到的几个部分。这就是你所缺少的：

您错过了graphs数组。这是串行图表所必需的（看起来你从饼图开始，这是完全不同的）。 graph数组中的每个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

amCharts无法显示数据？

1 个答案: