gpt4 book ai didi

javascript - amCharts 无法显示数据?

转载 作者:行者123 更新时间:2023-12-03 05:31:05 25 4
gpt4 key购买 nike

我是 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文件。

Screenshot from ChromeConsole showing output.json file

我无法弄清楚为什么数据没有显示在图表中。我尝试浏览并查看其他示例,但有点卡住了。

最佳答案

您的图表缺少一些可以在 amCharts site 上的任何行/列演示中找到的部分。这是您缺少的内容:

  • 您缺少 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
}
});

Demo

关于javascript - amCharts 无法显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40939422/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com