amCharts绘制堆叠面积图

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv {
          width: 650PX;
          height: 280px;
        }
    </style>
  </head>
  <body>
    <div id="chartdiv"></div>
    
    <script>
        am5.ready(function() {
        
        // Create root element
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var root = am5.Root.new("chartdiv");
        
        
        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root)
        ]);
        
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
          panX: true,
          panY: true,
          wheelX: "panX",
          wheelY: "zoomX",
          pinchZoomX: true
        }));
        
        
        chart.set("colors", am5.ColorSet.new(root, {
          step: 2,
          colors: [
            am5.color(0x73556E),
            am5.color(0x9FA1A6),
            am5.color(0xF2AA6B),
            am5.color(0xF28F6B),
            am5.color(0xA95A52),
            am5.color(0xE35B5D),
            am5.color(0xFFA446)
          ]
        }))
        
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
          behavior: "none"
        }));
        cursor.lineY.set("visible", false);
        
        
        // The data
        var data = [{
          "year": "2001",
          "cars": 1298,
          "motorcycles": 680,
          "bicycles": 101
        }, {
          "year": "2002",
          "cars": 1275,
          "motorcycles": 664,
          "bicycles": 97
        }, {
          "year": "2003",
          "cars": 1246,
          "motorcycles": 648,
          "bicycles": 93
        }, {
          "year": "2004",
          "cars": 1318,
          "motorcycles": 697,
          "bicycles": 111
        }, {
          "year": "2005",
          "cars": 1213,
          "motorcycles": 633,
          "bicycles": 87
        }, {
          "year": "2006",
          "cars": 1199,
          "motorcycles": 521,
          "bicycles": 145
        }, {
          "year": "2007",
          "cars": 1110,
          "motorcycles": 310,
          "bicycles": 91
        }, {
          "year": "2008",
          "cars": 1165,
          "motorcycles": 425,
          "bicycles": 120
        }, {
          "year": "2009",
          "cars": 1145,
          "motorcycles": 319,
          "bicycles": 102
        }, {
          "year": "2010",
          "cars": 1163,
          "motorcycles": 201,
          "bicycles": 145
        }, {
          "year": "2011",
          "cars": 1180,
          "motorcycles": 285,
          "bicycles": 100
        }, {
          "year": "2012",
          "cars": 1159,
          "motorcycles": 255,
          "bicycles": 122
        }];
        
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
          categoryField: "year",
          startLocation: 0.5,
          endLocation: 0.5,
          renderer: am5xy.AxisRendererX.new(root, {
            minorGridEnabled: true,
            minGridDistance: 70
          }),
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        xAxis.data.setAll(data);
        
        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererY.new(root, {})
        }));
        
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        
        function createSeries(name, field) {
          var series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
            name: name,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: field,
            categoryXField: "year",
            stacked: true,
            stroke: am5.color(0xffffff),
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
              labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
            })
          }));
        
          series.strokes.template.setAll({
            strokeWidth: 4,
            strokeOpacity: 1,
            shadowBlur: 2,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
            shadowColor: am5.color(0x000000),
            shadowOpacity: 0.1
          })
        
          series.fills.template.setAll({
            fillOpacity: 1,
            visible: true,
        
            fillPattern: am5.GrainPattern.new(root, {
              maxOpacity: 0.15,
              density: 0.5,
              colors: [am5.color(0x000000), am5.color(0x000000), am5.color(0xffffff)]
            })
        
          });
        
          series.data.setAll(data);
          series.appear(1000);
        }
        
        createSeries("Cars", "cars");
        createSeries("Motorcycles", "motorcycles");
        createSeries("Bicycles", "bicycles");
        
        // Add scrollbar
        // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
        chart.set("scrollbarX", am5.Scrollbar.new(root, {
          orientation: "horizontal"
        }));
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

posted @ 2024-05-30 11:38 DogLeftover 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· amCharts绘制100%堆叠柱形图

· amCharts绘制基于日期的面积图

· echarts 堆叠面积阶梯图

· v-charts areaStyle All In One

· v-charts 堆叠面积图 All In One

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

历史上的今天：
2021-05-30 spring boot纯注解开发模板

amCharts绘制堆叠面积图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
	<style>
	#chartdiv {
	width: 650PX;
	height: 280px;
	}
	</style>
	</head>
	<body>
	<div id="chartdiv"></div>

	<script>
	am5.ready(function() {

	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element
	var root = am5.Root.new("chartdiv");


	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
	am5themes_Animated.new(root)
	]);


	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
	panX: true,
	panY: true,
	wheelX: "panX",
	wheelY: "zoomX",
	pinchZoomX: true
	}));


	chart.set("colors", am5.ColorSet.new(root, {
	step: 2,
	colors: [
	am5.color(0x73556E),
	am5.color(0x9FA1A6),
	am5.color(0xF2AA6B),
	am5.color(0xF28F6B),
	am5.color(0xA95A52),
	am5.color(0xE35B5D),
	am5.color(0xFFA446)
	]
	}))


	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// The data
	var data = [{
	"year": "2001",
	"cars": 1298,
	"motorcycles": 680,
	"bicycles": 101
	}, {
	"year": "2002",
	"cars": 1275,
	"motorcycles": 664,
	"bicycles": 97
	}, {
	"year": "2003",
	"cars": 1246,
	"motorcycles": 648,
	"bicycles": 93
	}, {
	"year": "2004",
	"cars": 1318,
	"motorcycles": 697,
	"bicycles": 111
	}, {
	"year": "2005",
	"cars": 1213,
	"motorcycles": 633,
	"bicycles": 87
	}, {
	"year": "2006",
	"cars": 1199,
	"motorcycles": 521,
	"bicycles": 145
	}, {
	"year": "2007",
	"cars": 1110,
	"motorcycles": 310,
	"bicycles": 91
	}, {
	"year": "2008",
	"cars": 1165,
	"motorcycles": 425,
	"bicycles": 120
	}, {
	"year": "2009",
	"cars": 1145,
	"motorcycles": 319,
	"bicycles": 102
	}, {
	"year": "2010",
	"cars": 1163,
	"motorcycles": 201,
	"bicycles": 145
	}, {
	"year": "2011",
	"cars": 1180,
	"motorcycles": 285,
	"bicycles": 100
	}, {
	"year": "2012",
	"cars": 1159,
	"motorcycles": 255,
	"bicycles": 122
	}];


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
	categoryField: "year",
	startLocation: 0.5,
	endLocation: 0.5,
	renderer: am5xy.AxisRendererX.new(root, {
	minorGridEnabled: true,
	minGridDistance: 70
	}),
	tooltip: am5.Tooltip.new(root, {})
	}));

	xAxis.data.setAll(data);

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	function createSeries(name, field) {
	var series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
	name: name,
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: field,
	categoryXField: "year",
	stacked: true,
	stroke: am5.color(0xffffff),
	tooltip: am5.Tooltip.new(root, {
	pointerOrientation: "horizontal",
	labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
	})
	}));

	series.strokes.template.setAll({
	strokeWidth: 4,
	strokeOpacity: 1,
	shadowBlur: 2,
	shadowOffsetX: 2,
	shadowOffsetY: 2,
	shadowColor: am5.color(0x000000),
	shadowOpacity: 0.1
	})

	series.fills.template.setAll({
	fillOpacity: 1,
	visible: true,

	fillPattern: am5.GrainPattern.new(root, {
	maxOpacity: 0.15,
	density: 0.5,
	colors: [am5.color(0x000000), am5.color(0x000000), am5.color(0xffffff)]
	})

	});

	series.data.setAll(data);
	series.appear(1000);
	}

	createSeries("Cars", "cars");
	createSeries("Motorcycles", "motorcycles");
	createSeries("Bicycles", "bicycles");

	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	orientation: "horizontal"
	}));

	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);

	}); // end am5.ready()
	</script>
	</body>
	</html>