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>
    <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
    <style>
        #chartdiv {
          width: 1050PX;
          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: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        paddingLeft: 0,
        layout: root.verticalLayout
      }));
      
      // Data
      var colors = chart.get("colors");
      
      var data = [{
        country: "US",
        visits: 725,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "UK",
        visits: 625,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "China",
        visits: 602,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Japan",
        visits: 509,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Germany",
        visits: 322,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "France",
        visits: 214,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "India",
        visits: 204,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Spain",
        visits: 198,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Netherlands",
        visits: 165,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/netherlands.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "South Korea",
        visits: 93,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/south-korea.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Canada",
        visits: 41,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
        columnSettings: { fill: colors.next() }
      }];
      
      // Create axes
      // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
      var xRenderer = am5xy.AxisRendererX.new(root, {
        minGridDistance: 30,
        minorGridEnabled: true
      })
      
      var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "country",
        renderer: xRenderer,
        bullet: function (root, axis, dataItem) {
          return am5xy.AxisBullet.new(root, {
            location: 0.5,
            sprite: am5.Picture.new(root, {
              width: 24,
              height: 24,
              centerY: am5.p50,
              centerX: am5.p50,
              src: dataItem.dataContext.icon
            })
          });
        }
      }));
      
      xRenderer.grid.template.setAll({
        location: 1
      })
      
      xRenderer.labels.template.setAll({
        paddingTop: 20
      });
      
      xAxis.data.setAll(data);
      
      var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {
          strokeOpacity: 0.1
        })
      }));
 
      // Add series
      // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
      var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "visits",
        categoryXField: "country"
      }));
      
      series.columns.template.setAll({
        tooltipText: "{categoryX}: {valueY}",
        tooltipY: 0,
        strokeOpacity: 0,
        templateField: "columnSettings"
      });
      
      series.data.setAll(data);
 
      // Make stuff animate on load
      // https://www.amcharts.com/docs/v5/concepts/animations/
      series.appear();
      chart.appear(1000, 100);
      
      }); // end am5.ready()
    </script>
  </body>
</html>

效果图

点击查看详情

posted @ 2024-04-26 17:49 DogLeftover 阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· amCharts丛集柱形图

· amCharts粒状梯度柱形图

· Echarts5之地图实现

· echarts树图实现的组织架构

· echarts笔记

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

历史上的今天：
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>
	<script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
	<style>
	#chartdiv {
	width: 1050PX;
	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: false,
	panY: false,
	wheelX: "panX",
	wheelY: "zoomX",
	paddingLeft: 0,
	layout: root.verticalLayout
	}));

	// Data
	var colors = chart.get("colors");

	var data = [{
	country: "US",
	visits: 725,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "UK",
	visits: 625,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "China",
	visits: 602,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "Japan",
	visits: 509,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "Germany",
	visits: 322,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "France",
	visits: 214,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "India",
	visits: 204,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "Spain",
	visits: 198,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "Netherlands",
	visits: 165,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/netherlands.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "South Korea",
	visits: 93,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/south-korea.svg",
	columnSettings: { fill: colors.next() }
	}, {
	country: "Canada",
	visits: 41,
	icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
	columnSettings: { fill: colors.next() }
	}];

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

	var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
	categoryField: "country",
	renderer: xRenderer,
	bullet: function (root, axis, dataItem) {
	return am5xy.AxisBullet.new(root, {
	location: 0.5,
	sprite: am5.Picture.new(root, {
	width: 24,
	height: 24,
	centerY: am5.p50,
	centerX: am5.p50,
	src: dataItem.dataContext.icon
	})
	});
	}
	}));

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

	xRenderer.labels.template.setAll({
	paddingTop: 20
	});

	xAxis.data.setAll(data);

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

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	var series = chart.series.push(am5xy.ColumnSeries.new(root, {
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: "visits",
	categoryXField: "country"
	}));

	series.columns.template.setAll({
	tooltipText: "{categoryX}: {valueY}",
	tooltipY: 0,
	strokeOpacity: 0,
	templateField: "columnSettings"
	});

	series.data.setAll(data);

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

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