文章/答案/技术大牛

发布

问amCharts不能显示数据？
EN

Stack Overflow用户

提问于 2016-12-02 19:14:02

回答 1查看 1.2K关注 0票数 0

我是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

output.json和test2.html位于同一个目录中

我可以从色鞋底上看到，它正在正确地加载json文件。

我无法弄清楚为什么图表中没有显示数据。我试着浏览和查看其他的例子，有点卡住了。

javascript

html

json

amcharts

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-02 19:37:03

您的图表缺少了一些您可以在amCharts站点上的任何行/列演示中找到的部分。这是你所缺少的：

您缺少了一个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
        }
    });

演示

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40939422

复制

相似问题

问amCharts不能显示数据？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问amCharts不能显示数据？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问amCharts不能显示数据？
EN