对于一个项目，我需要在单个 html 静态页面(未托管在服务器上)中显示三种不同类型的 AMcharts(饼图、条形图、折线图)，并使用选择菜单选项更改所有这三种类型的数据集。
例如，菜单选项可以是 jan、feb、mar、apr，饼图数据可以是产品 a、b、c，值分别为 5、10、20。条形图的数据可以是缺陷 x、y、x，值为 300,400、260。类似地，折线图也将具有一些不同的数据集。所有三个图表将并排显示且大小相同。
所有数据都将在 html/javascript 中进行条形码编码，无需连接任何数据库或服务器。 AMcharts js 文件也将存储在本地电脑中，因为所有这些任务都是离线运行的。如果可以编写一些简单的示例代码，我将非常感激。谢谢大家
最佳答案
我在下面为您添加了一个启动器。您可以复制此 HTML 并保存为 HTML 文件。您应该能够从那里运行它。
所有 amCharts 文件均从 CDN 加载，因此您无需复制其内容。
每个图表都使用自己的 ID，其代码包含在一个函数中，因此您不必在变量名称上发挥创意。
现在我将把图表代码部分留给您。玩得开心!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>amCharts V4 Example - multiple charts</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #ffffff;
overflow: hidden;
margin: 0;
}
.chart {
width: 100%;
max-width: 600px;
height: 100vh;
max-height: 600px;
}
</style>
</head>
<body>
<!-- Add first chart container -->
<div id="chart-1" class="chart"></div>
<!-- Add second chart container -->
<div id="chart-2" class="chart"></div>
<!-- Add third chart container -->
<div id="chart-3" class="chart"></div>
<!-- Add chart dependencies from CDN -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Add the charts -->
<script>
// Set the theme
am4core.useTheme(am4themes_animated);
// Enclose the code for chart-1
(function () {
var chart = am4core.create("chart-1", am4charts.PieChart);
// Add data
chart.data = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}];
// The chart code comes here
})();
// Enclose the code for chart-2
(function () {
var chart = am4core.create("chart-2", am4charts.PieChart);
// The chart code comes here
})();
// Enclose the code for chart-3
(function () {
var chart = am4core.create("chart-3", am4charts.PieChart);
// The chart code comes here
})();
</script>
</body>
</html>
关于javascript - 如何在单个静态 HTML 中显示 2-3 个 AMcharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54116584/