Amchart 3D柱形图 一柱多值
程序员文章站
2024-01-19 13:54:58
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#chartdiv{width: 100%;height: 500px;}
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"depth3D": 20,
"angle": 30,
"legend": {
"horizontalGap": 10,
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [ {
"year": 2003,
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 1.2,
"meast": 3,
"africa": 0.6
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 1.3,
"meast": 2,
"africa": 0.5
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 1.4,
"meast": 1,
"africa": 0.8
}],
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0
} ],
"graphs": [ {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"newStack": true,
"color": "#000000",
"valueField": "asia"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Latin America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Middle-East",
"type": "column",
"color": "#000000",
"valueField": "meast"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "africa"
} , {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Africa",
"type": "column",
"color": "#000000",
"valueField": "europe"
} ],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
} );
</script>
</html>
qq:3229835419
有其他问题一起讨论学习。
推荐阅读