amCharts绘制饼图

案例1

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.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/percent-charts/pie-chart/
        var chart = root.container.children.push(
          am5percent.PieChart.new(root, {
            endAngle: 270
          })
        );
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series = chart.series.push(
          am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category",
            endAngle: 270
          })
        );
        
        series.states.create("hidden", {
          endAngle: -90
        });
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([{
          category: "Lithuania",
          value: 501.9
        }, {
          category: "Czechia",
          value: 301.9
        }, {
          category: "Ireland",
          value: 201.1
        }, {
          category: "Germany",
          value: 165.8
        }, {
          category: "Australia",
          value: 139.9
        }, {
          category: "Austria",
          value: 128.3
        }, {
          category: "UK",
          value: 99
        }]);
        
        series.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

点击查看详情

案例2

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv {
          width: 450PX;
          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/percent-charts/pie-chart/
        var chart = root.container.children.push(am5percent.PieChart.new(root, {
          layout: root.verticalLayout
        }));
        
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series = chart.series.push(am5percent.PieSeries.new(root, {
          valueField: "value",
          categoryField: "category"
        }));
        
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([
          { value: 10, category: "One" },
          { value: 9, category: "Two" },
          { value: 6, category: "Three" },
          { value: 5, category: "Four" },
          { value: 4, category: "Five" },
          { value: 3, category: "Six" },
          { value: 1, category: "Seven" },
        ]);
        
        
        // Create legend
        // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
        var legend = chart.children.push(am5.Legend.new(root, {
          centerX: am5.percent(50),
          x: am5.percent(50),
          marginTop: 15,
          marginBottom: 15
        }));
        
        legend.data.setAll(series.dataItems);
        
        
        // Play initial series animation
        // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
        series.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

点击查看详情

案例3

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv {
          width: 550PX;
          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/percent-charts/pie-chart/
        var chart = root.container.children.push(am5percent.PieChart.new(root, {
          layout: root.verticalLayout
        }));
        
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series = chart.series.push(am5percent.PieSeries.new(root, {
          alignLabels: true,
          calculateAggregates: true,
          valueField: "value",
          categoryField: "category"
        }));
        
        series.slices.template.setAll({
          strokeWidth: 3,
          stroke: am5.color(0xffffff)
        });
        
        series.labelsContainer.set("paddingTop", 30)
        
        
        // Set up adapters for variable slice radius
        // https://www.amcharts.com/docs/v5/concepts/settings/adapters/
        series.slices.template.adapters.add("radius", function (radius, target) {
          var dataItem = target.dataItem;
          var high = series.getPrivate("valueHigh");
        
          if (dataItem) {
            var value = target.dataItem.get("valueWorking", 0);
            return radius * value / high
          }
          return radius;
        });
        
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([{
          value: 10,
          category: "One"
        }, {
          value: 9,
          category: "Two"
        }, {
          value: 6,
          category: "Three"
        }, {
          value: 5,
          category: "Four"
        }, {
          value: 4,
          category: "Five"
        }, {
          value: 3,
          category: "Six"
        }]);
        
        
        // Create legend
        // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
        var legend = chart.children.push(am5.Legend.new(root, {
          centerX: am5.p50,
          x: am5.p50,
          marginTop: 15,
          marginBottom: 15
        }));
        
        legend.data.setAll(series.dataItems);
        
        
        // Play initial series animation
        // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
        series.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

点击查看详情

posted @ 2024-05-30 15:50 DogLeftover 阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· amCharts绘制关联饼图

· amCharts绘制甜甜圈

· echarts之带图片的饼图

· echarts 饼图嵌套二级饼图子饼图复合饼图

· echarts 画一个自定义饼图

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

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

amCharts绘制饼图

案例1

案例2

案例3

我的标签

合集 (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/percent.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/percent-charts/pie-chart/
	var chart = root.container.children.push(
	am5percent.PieChart.new(root, {
	endAngle: 270
	})
	);

	// Create series
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
	var series = chart.series.push(
	am5percent.PieSeries.new(root, {
	valueField: "value",
	categoryField: "category",
	endAngle: 270
	})
	);

	series.states.create("hidden", {
	endAngle: -90
	});

	// Set data
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
	series.data.setAll([{
	category: "Lithuania",
	value: 501.9
	}, {
	category: "Czechia",
	value: 301.9
	}, {
	category: "Ireland",
	value: 201.1
	}, {
	category: "Germany",
	value: 165.8
	}, {
	category: "Australia",
	value: 139.9
	}, {
	category: "Austria",
	value: 128.3
	}, {
	category: "UK",
	value: 99
	}]);

	series.appear(1000, 100);

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