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: 600PX;
          height: 350px;
        }
    </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,
          paddingLeft:0,
          paddingRight:1
        }));
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
        cursor.lineY.set("visible", false);
        
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xRenderer = am5xy.AxisRendererX.new(root, { 
          minGridDistance: 30, 
          minorGridEnabled: true
        });
        
        xRenderer.labels.template.setAll({
          rotation: -90,
          centerY: am5.p50,
          centerX: am5.p100,
          paddingRight: 15
        });
        
        xRenderer.grid.template.setAll({
          location: 1
        })
        
        var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
          maxDeviation: 0.3,
          categoryField: "country",
          renderer: xRenderer,
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        var yRenderer = am5xy.AxisRendererY.new(root, {
          strokeOpacity: 0.1
        })
        
        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
          maxDeviation: 0.3,
          renderer: yRenderer
        }));
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
          name: "Series 1",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value",
          sequencedInterpolation: true,
          categoryXField: "country",
          tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
          })
        }));
        
        series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
        series.columns.template.adapters.add("fill", function (fill, target) {
          return chart.get("colors").getIndex(series.columns.indexOf(target));
        });
        
        series.columns.template.adapters.add("stroke", function (stroke, target) {
          return chart.get("colors").getIndex(series.columns.indexOf(target));
        });
        
        
        // Set data
        var data = [{
          country: "USA",
          value: 2025
        }, {
          country: "China",
          value: 1882
        }, {
          country: "Japan",
          value: 1809
        }, {
          country: "Germany",
          value: 1322
        }, {
          country: "UK",
          value: 1122
        }, {
          country: "France",
          value: 1114
        }, {
          country: "India",
          value: 984
        }, {
          country: "Spain",
          value: 711
        }, {
          country: "Netherlands",
          value: 665
        }, {
          country: "South Korea",
          value: 443
        }, {
          country: "Canada",
          value: 441
        }];
        
        xAxis.data.setAll(data);
        series.data.setAll(data);
        
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>
  </body>
</html>

效果图

posted @ 2024-04-26 10:31 DogLeftover 阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· amCharts图像分类

· amCharts丛集柱形图

· ECharts笔记

· echarts动态排序柱状图

· HTML中使用Echarts

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2022-04-26 Mybatis入门（五）：缓存
2022-04-26 Mybatis入门（四）：动态sql
2022-04-26 idea不能识别yaml文件
2022-04-26 docker容器通讯

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: 600PX;
	height: 350px;
	}
	</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,
	paddingLeft:0,
	paddingRight:1
	}));

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


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xRenderer = am5xy.AxisRendererX.new(root, {
	minGridDistance: 30,
	minorGridEnabled: true
	});

	xRenderer.labels.template.setAll({
	rotation: -90,
	centerY: am5.p50,
	centerX: am5.p100,
	paddingRight: 15
	});

	xRenderer.grid.template.setAll({
	location: 1
	})

	var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
	maxDeviation: 0.3,
	categoryField: "country",
	renderer: xRenderer,
	tooltip: am5.Tooltip.new(root, {})
	}));

	var yRenderer = am5xy.AxisRendererY.new(root, {
	strokeOpacity: 0.1
	})

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

	// Create series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	var series = chart.series.push(am5xy.ColumnSeries.new(root, {
	name: "Series 1",
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: "value",
	sequencedInterpolation: true,
	categoryXField: "country",
	tooltip: am5.Tooltip.new(root, {
	labelText: "{valueY}"
	})
	}));

	series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
	series.columns.template.adapters.add("fill", function (fill, target) {
	return chart.get("colors").getIndex(series.columns.indexOf(target));
	});

	series.columns.template.adapters.add("stroke", function (stroke, target) {
	return chart.get("colors").getIndex(series.columns.indexOf(target));
	});


	// Set data
	var data = [{
	country: "USA",
	value: 2025
	}, {
	country: "China",
	value: 1882
	}, {
	country: "Japan",
	value: 1809
	}, {
	country: "Germany",
	value: 1322
	}, {
	country: "UK",
	value: 1122
	}, {
	country: "France",
	value: 1114
	}, {
	country: "India",
	value: 984
	}, {
	country: "Spain",
	value: 711
	}, {
	country: "Netherlands",
	value: 665
	}, {
	country: "South Korea",
	value: 443
	}, {
	country: "Canada",
	value: 441
	}];

	xAxis.data.setAll(data);
	series.data.setAll(data);


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

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