如何在单个静态超文本标记语言中显示2-3个AMcharts
如何在单个静态超文本标记语言中显示2-3个AMcharts
提问于 2019-01-10 02:55:11
对于一个项目，我需要在一个单独的html静态页面(不在服务器上托管)中显示三种不同类型的AMcharts (饼、条形、线条)，并使用选择菜单选项更改所有这三种类型的数据集。
例如，菜单选项可以是jan、feb、mar、apr，而饼图的数据可以是分别具有值5、10、20的产品a、b、C。条形图的数据可以是缺陷x，y，x，值为300,400,260。同样，折线图将具有一些不同的数据集。所有三个图表将并排显示，大小相等。
所有数据都将在html/javascript中进行条形码编码，无需连接任何数据库或服务器。AMcharts js文件也将存储在本地pc中，因为所有这些任务都是脱机运行的。如果能写出一些简单的示例代码，我将非常感激。谢谢大家
回答 1
Stack Overflow用户
发布于 2019-01-10 12:19:50
我将在下面为您添加一个启动器。您可以复制此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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54116584
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号