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: 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)
        ]);
        
        root.container.set("layout", root.verticalLayout);
        
        // Create container to hold charts
        var chartContainer = root.container.children.push(am5.Container.new(root, {
          layout: root.horizontalLayout,
          width: am5.p100,
          height: am5.p100
        }));
        
        // Create the 1st chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart = chartContainer.children.push(
          am5percent.PieChart.new(root, {
            endAngle: 270,
            innerRadius: am5.percent(60)
          })
        );
        
        
        var series = chart.series.push(
          am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category",
            endAngle: 270,
            alignLabels: false
          })
        );
        
        series.children.push(am5.Label.new(root, {
          centerX: am5.percent(50),
          centerY: am5.percent(50),
          text: "First: {valueSum}",
          populateText: true,
          fontSize: "1.5em"
        }));
        
        series.slices.template.setAll({
          cornerRadius: 8
        })
        
        series.states.create("hidden", {
          endAngle: -90
        });
        
        series.labels.template.setAll({
          textType: "circular"
        });
        
        
        // Create the 2nd chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart2 = chartContainer.children.push(
          am5percent.PieChart.new(root, {
            endAngle: 270,
            innerRadius: am5.percent(60)
          })
        );
        
        var series2 = chart2.series.push(
          am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category",
            endAngle: 270,
            alignLabels: false,
            tooltip: am5.Tooltip.new(root, {}) // a separate tooltip needed for this series
          })
        );
        
        series2.children.push(am5.Label.new(root, {
          centerX: am5.percent(50),
          centerY: am5.percent(50),
          text: "Second: {valueSum}",
          populateText: true,
          fontSize: "1.5em"
        }));
        
        series2.slices.template.setAll({
          cornerRadius: 8
        })
        
        series2.states.create("hidden", {
          endAngle: -90
        });
        
        series2.labels.template.setAll({
          textType: "circular"
        });
        
        
        // Duplicate interaction
        // Must be added before setting data
        series.slices.template.events.on("pointerover", function(ev) {
          var slice = ev.target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series2);
        
          if (otherSlice) {
            otherSlice.hover();
          }
        });
        
        series.slices.template.events.on("pointerout", function(ev) {
          var slice = ev.target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series2);
        
          if (otherSlice) {
            otherSlice.unhover();
          }
        });
        
        series.slices.template.on("active", function(active, target) {
          var slice = target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series2);
        
          if (otherSlice) {
            otherSlice.set("active", active);
          }
        });
        
        // Same for the 2nd series
        series2.slices.template.events.on("pointerover", function(ev) {
          var slice = ev.target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series);
        
          if (otherSlice) {
            otherSlice.hover();
          }
        });
        
        series2.slices.template.events.on("pointerout", function(ev) {
          var slice = ev.target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series);
        
          if (otherSlice) {
            otherSlice.unhover();
          }
        });
        
        series2.slices.template.on("active", function(active, target) {
          var slice = target;
          var dataItem = slice.dataItem;
          var otherSlice = getSlice(dataItem, series);
        
          if (otherSlice) {
            otherSlice.set("active", active);
          }
        });
        
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([{
          category: "Lithuania",
          value: 501
        }, {
          category: "Czechia",
          value: 301
        }, {
          category: "Ireland",
          value: 201
        }, {
          category: "Germany",
          value: 165
        }]);
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series2.data.setAll([{
          category: "Lithuania",
          value: 201
        }, {
          category: "Czechia",
          value: 101
        }, {
          category: "Ireland",
          value: 51
        }, {
          category: "Germany",
          value: 15
        }]);
        
        
        
        function getSlice(dataItem, series) {
          var otherSlice;
          am5.array.each(series.dataItems, function(di) {
            if (di.get("category") === dataItem.get("category")) {
              otherSlice = di.get("slice");
            }
          });
        
          return otherSlice;
        }
        
        // Create legend
        var legend = root.container.children.push(am5.Legend.new(root, {
          x: am5.percent(50),
          centerX: am5.percent(50)
        }));
        
        
        // Trigger all the same for the 2nd series
        legend.itemContainers.template.events.on("pointerover", function(ev) {
          var dataItem = ev.target.dataItem.dataContext;
          var slice = getSlice(dataItem, series2);
          slice.hover();
        });
        
        legend.itemContainers.template.events.on("pointerout", function(ev) {
          var dataItem = ev.target.dataItem.dataContext;
          var slice = getSlice(dataItem, series2);
          slice.unhover();
        });
        
        legend.itemContainers.template.on("disabled", function(disabled, target) {
          var dataItem = target.dataItem.dataContext;
          var slice = getSlice(dataItem, series2);
          if (disabled) {
            series2.hideDataItem(slice.dataItem);
          }
          else {
            series2.showDataItem(slice.dataItem);
          }
        });
        
        legend.data.setAll(series.dataItems);
        
        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: 650PX;
          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");
        
        // Create custom theme
        // https://www.amcharts.com/docs/v5/concepts/themes/#Quick_custom_theme
        var myTheme = am5.Theme.new(root);
        myTheme.rule("Label").set("fontSize", "0.8em");
        
        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root),
          myTheme
        ]);
        
        // Create wrapper container
        var container = root.container.children.push(am5.Container.new(root, {
          width: am5.p100,
          height: am5.p100,
          layout: root.horizontalLayout
        }));
        
        // Create first chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart0 = container.children.push(am5percent.PieChart.new(root, {
          innerRadius: am5.p50,
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series0 = chart0.series.push(am5percent.PieSeries.new(root, {
          valueField: "value",
          categoryField: "category",
          alignLabels: false
        }));
        
        series0.labels.template.setAll({
          textType: "circular",
          templateField: "dummyLabelSettings"
        });
        
        series0.ticks.template.set("forceHidden", true);
        
        var sliceTemplate0 = series0.slices.template;
        sliceTemplate0.setAll({
          draggable: true,
          templateField: "settings",
          cornerRadius: 5
        });
        
        // Separator line
        container.children.push(am5.Line.new(root, {
          layer: 1,
          height: am5.percent(60),
          y: am5.p50,
          centerY: am5.p50,
          strokeDasharray: [4, 4],
          stroke: root.interfaceColors.get("alternativeBackground"),
          strokeOpacity: 0.5
        }));
        
        // Label
        container.children.push(am5.Label.new(root, {
          layer: 1,
          text: "Drag slices over the line",
          y: am5.p50,
          textAlign: "center",
          rotation: -90,
          isMeasured: false
        }));
        
        // Create second chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart1 = container.children.push(am5percent.PieChart.new(root, {
          innerRadius: am5.p50,
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series1 = chart1.series.push(am5percent.PieSeries.new(root, {
          valueField: "value",
          categoryField: "category",
          alignLabels: false
        }));
        
        series1.labels.template.setAll({
          textType: "circular",
          radius: 20,
          templateField: "dummyLabelSettings"
        });
        
        series1.ticks.template.set("forceHidden", true);
        
        var sliceTemplate1 = series1.slices.template;
        sliceTemplate1.setAll({
          draggable: true,
          templateField: "settings",
          cornerRadius: 5
        });
        
        var previousDownSlice;
        
        // change layers when down
        sliceTemplate0.events.on("pointerdown", function (e) {
          if (previousDownSlice) {
            //  previousDownSlice.set("layer", 0);
          }
          e.target.set("layer", 1);
          previousDownSlice = e.target;
        });
        
        sliceTemplate1.events.on("pointerdown", function (e) {
          if (previousDownSlice) {
            // previousDownSlice.set("layer", 0);
          }
          e.target.set("layer", 1);
          previousDownSlice = e.target;
        });
        
        // when released, do all the magic
        sliceTemplate0.events.on("pointerup", function (e) {
          series0.hideTooltip();
          series1.hideTooltip();
        
          var slice = e.target;
          if (slice.x() > container.width() / 4) {
            var index = series0.slices.indexOf(slice);
            slice.dataItem.hide();
        
            var series1DataItem = series1.dataItems[index];
            series1DataItem.show();
            series1DataItem.get("slice").setAll({ x: 0, y: 0 });
        
            handleDummy(series0);
            handleDummy(series1);
          } else {
            slice.animate({
              key: "x",
              to: 0,
              duration: 500,
              easing: am5.ease.out(am5.ease.cubic)
            });
            slice.animate({
              key: "y",
              to: 0,
              duration: 500,
              easing: am5.ease.out(am5.ease.cubic)
            });
          }
        });
        
        sliceTemplate1.events.on("pointerup", function (e) {
          var slice = e.target;
        
          series0.hideTooltip();
          series1.hideTooltip();
        
          if (slice.x() < container.width() / 4) {
            var index = series1.slices.indexOf(slice);
            slice.dataItem.hide();
        
            var series0DataItem = series0.dataItems[index];
            series0DataItem.show();
            series0DataItem.get("slice").setAll({ x: 0, y: 0 });
        
            handleDummy(series0);
            handleDummy(series1);
          } else {
            slice.animate({
              key: "x",
              to: 0,
              duration: 500,
              easing: am5.ease.out(am5.ease.cubic)
            });
            slice.animate({
              key: "y",
              to: 0,
              duration: 500,
              easing: am5.ease.out(am5.ease.cubic)
            });
          }
        });
        
        // data
        var data = [
          {
            category: "Dummy",
            value: 1000,
            settings: {
              fill: am5.color(0xdadada),
              stroke: am5.color(0xdadada),
              fillOpacity: 0.3,
              strokeDasharray: [4, 4],
              tooltipText: null,
              draggable: false
            },
            dummyLabelSettings: {
              forceHidden: true
            }
          },
          {
            category: "Lithuania",
            value: 501.9
          },
          {
            category: "Estonia",
            value: 301.9
          },
          {
            category: "Ireland",
            value: 201.1
          },
          {
            category: "Germany",
            value: 165.8
          },
          {
            category: "Australia",
            value: 139.9
          },
          {
            category: "Austria",
            value: 128.3
          }
        ];
        
        // show/hide dummy slice depending if there are other visible slices
        function handleDummy(series) {
          // count visible data items
          var visibleCount = 0;
          am5.array.each(series.dataItems, function (dataItem) {
            if (!dataItem.isHidden()) {
              visibleCount++;
            }
          });
          // if all hidden, show dummy
          if (visibleCount == 0) {
            series.dataItems[0].show();
          } else {
            series.dataItems[0].hide();
          }
        }
        // set data
        series0.data.setAll(data);
        series1.data.setAll(data);
        
        // hide all except dummy
        am5.array.each(series1.dataItems, function (dataItem) {
          if (dataItem.get("category") != "Dummy") {
            dataItem.hide(0);
          }
        });
        
        // hide dummy
        series0.dataItems[0].hide(0);
        
        // reveal container
        container.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: 750PX;
          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)]);
        
        var container = root.container.children.push(
          am5.Container.new(root, {
            width: am5.p100,
            height: am5.p100,
            layout: root.horizontalLayout
          })
        );
        
        // Create main chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart = container.children.push(
          am5percent.PieChart.new(root, {
            tooltip: am5.Tooltip.new(root, {})
          })
        );
        
        // 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",
            alignLabels: false
          })
        );
        
        series.labels.template.setAll({
          textType: "circular",
          radius: 4
        });
        series.ticks.template.set("visible", false);
        series.slices.template.set("toggleKey", "none");
        
        // add events
        series.slices.template.events.on("click", function(e) {
          selectSlice(e.target);
        });
        
        // Create sub chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var subChart = container.children.push(
          am5percent.PieChart.new(root, {
            radius: am5.percent(50),
            tooltip: am5.Tooltip.new(root, {})
          })
        );
        
        // Create sub series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var subSeries = subChart.series.push(
          am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category"
          })
        );
        
        subSeries.data.setAll([
          { category: "A", value: 0 },
          { category: "B", value: 0 },
          { category: "C", value: 0 },
          { category: "D", value: 0 },
          { category: "E", value: 0 },
          { category: "F", value: 0 },
          { category: "G", value: 0 }
        ]);
        subSeries.slices.template.set("toggleKey", "none");
        
        var selectedSlice;
        
        series.on("startAngle", function() {
          updateLines();
        });
        
        container.events.on("boundschanged", function() {
          root.events.once("frameended", function() {
            updateLines();
           })
        });
        
        function updateLines() {
          if (selectedSlice) {
            var startAngle = selectedSlice.get("startAngle");
            var arc = selectedSlice.get("arc");
            var radius = selectedSlice.get("radius");
        
            var x00 = radius * am5.math.cos(startAngle);
            var y00 = radius * am5.math.sin(startAngle);
        
            var x10 = radius * am5.math.cos(startAngle + arc);
            var y10 = radius * am5.math.sin(startAngle + arc);
        
            var subRadius = subSeries.slices.getIndex(0).get("radius");
            var x01 = 0;
            var y01 = -subRadius;
        
            var x11 = 0;
            var y11 = subRadius;
        
            var point00 = series.toGlobal({ x: x00, y: y00 });
            var point10 = series.toGlobal({ x: x10, y: y10 });
        
            var point01 = subSeries.toGlobal({ x: x01, y: y01 });
            var point11 = subSeries.toGlobal({ x: x11, y: y11 });
        
            line0.set("points", [point00, point01]);
            line1.set("points", [point10, point11]);
          }
        }
        
        // lines
        var line0 = container.children.push(
          am5.Line.new(root, {
            position: "absolute",
            stroke: root.interfaceColors.get("text"),
            strokeDasharray: [2, 2]
          })
        );
        var line1 = container.children.push(
          am5.Line.new(root, {
            position: "absolute",
            stroke: root.interfaceColors.get("text"),
            strokeDasharray: [2, 2]
          })
        );
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([
          {
            category: "Lithuania",
            value: 500,
            subData: [
              { category: "A", value: 200 },
              { category: "B", value: 150 },
              { category: "C", value: 100 },
              { category: "D", value: 100 }
            ]
          },
          {
            category: "Czechia",
            value: 300,
            subData: [
              { category: "A", value: 150 }
            ]
          },
          {
            category: "Ireland",
            value: 200,
            subData: [
              { category: "A", value: 110 },
              { category: "B", value: 60 },
              { category: "C", value: 30 }
            ]
          },
          {
            category: "Germany",
            value: 150,
            subData: [
              { category: "A", value: 80 },
              { category: "B", value: 40 },
              { category: "C", value: 30 }
            ]
          },
          {
            category: "Australia",
            value: 140,
            subData: [
              { category: "A", value: 90 },
              { category: "B", value: 40 },
              { category: "C", value: 10 }
            ]
          },
          {
            category: "Austria",
            value: 120,
            subData: [
              { category: "A", value: 60 },
              { category: "B", value: 30 },
              { category: "C", value: 30 }
            ]
          }
        ]);
        
        function selectSlice(slice) {
          selectedSlice = slice;
          var dataItem = slice.dataItem;
          var dataContext = dataItem.dataContext;
        
          if (dataContext) {
            var i = 0;
            subSeries.data.each(function(dataObject) {
              var dataObj = dataContext.subData[i];
              if(dataObj){
                  if(!subSeries.dataItems[i].get("visible")){
                      subSeries.dataItems[i].show();
                  }
                  subSeries.data.setIndex(i, dataObj);
              }
              else{
                  subSeries.dataItems[i].hide();
              }
              
              i++;
            });
          }
        
          var middleAngle = slice.get("startAngle") + slice.get("arc") / 2;
          var firstAngle = series.dataItems[0].get("slice").get("startAngle");
        
          series.animate({
            key: "startAngle",
            to: firstAngle - middleAngle,
            duration: 1000,
            easing: am5.ease.out(am5.ease.cubic)
          });
          series.animate({
            key: "endAngle",
            to: firstAngle - middleAngle + 360,
            duration: 1000,
            easing: am5.ease.out(am5.ease.cubic)
          });
        }
        
        container.appear(1000, 10);
        
        series.events.on("datavalidated", function() {
          selectSlice(series.slices.getIndex(0));
        });
        
        }); // end am5.ready()
    </script>            
  </body>
</html>

效果图

点击查看详情

posted @ 2024-05-30 17:40 DogLeftover 阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· amCharts绘制饼图

· amCharts绘制甜甜圈

· Qt-QtChart自定义显示样式

· JavaScript-图表入门指南-全-

· 5.饼图、环图、玫瑰图

阅读排行：
· 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: 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)
	]);

	root.container.set("layout", root.verticalLayout);

	// Create container to hold charts
	var chartContainer = root.container.children.push(am5.Container.new(root, {
	layout: root.horizontalLayout,
	width: am5.p100,
	height: am5.p100
	}));

	// Create the 1st chart
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
	var chart = chartContainer.children.push(
	am5percent.PieChart.new(root, {
	endAngle: 270,
	innerRadius: am5.percent(60)
	})
	);


	var series = chart.series.push(
	am5percent.PieSeries.new(root, {
	valueField: "value",
	categoryField: "category",
	endAngle: 270,
	alignLabels: false
	})
	);

	series.children.push(am5.Label.new(root, {
	centerX: am5.percent(50),
	centerY: am5.percent(50),
	text: "First: {valueSum}",
	populateText: true,
	fontSize: "1.5em"
	}));

	series.slices.template.setAll({
	cornerRadius: 8
	})

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

	series.labels.template.setAll({
	textType: "circular"
	});


	// Create the 2nd chart
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
	var chart2 = chartContainer.children.push(
	am5percent.PieChart.new(root, {
	endAngle: 270,
	innerRadius: am5.percent(60)
	})
	);

	var series2 = chart2.series.push(
	am5percent.PieSeries.new(root, {
	valueField: "value",
	categoryField: "category",
	endAngle: 270,
	alignLabels: false,
	tooltip: am5.Tooltip.new(root, {}) // a separate tooltip needed for this series
	})
	);

	series2.children.push(am5.Label.new(root, {
	centerX: am5.percent(50),
	centerY: am5.percent(50),
	text: "Second: {valueSum}",
	populateText: true,
	fontSize: "1.5em"
	}));

	series2.slices.template.setAll({
	cornerRadius: 8
	})

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

	series2.labels.template.setAll({
	textType: "circular"
	});


	// Duplicate interaction
	// Must be added before setting data
	series.slices.template.events.on("pointerover", function(ev) {
	var slice = ev.target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series2);

	if (otherSlice) {
	otherSlice.hover();
	}
	});

	series.slices.template.events.on("pointerout", function(ev) {
	var slice = ev.target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series2);

	if (otherSlice) {
	otherSlice.unhover();
	}
	});

	series.slices.template.on("active", function(active, target) {
	var slice = target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series2);

	if (otherSlice) {
	otherSlice.set("active", active);
	}
	});

	// Same for the 2nd series
	series2.slices.template.events.on("pointerover", function(ev) {
	var slice = ev.target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series);

	if (otherSlice) {
	otherSlice.hover();
	}
	});

	series2.slices.template.events.on("pointerout", function(ev) {
	var slice = ev.target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series);

	if (otherSlice) {
	otherSlice.unhover();
	}
	});

	series2.slices.template.on("active", function(active, target) {
	var slice = target;
	var dataItem = slice.dataItem;
	var otherSlice = getSlice(dataItem, series);

	if (otherSlice) {
	otherSlice.set("active", active);
	}
	});


	// Set data
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
	series.data.setAll([{
	category: "Lithuania",
	value: 501
	}, {
	category: "Czechia",
	value: 301
	}, {
	category: "Ireland",
	value: 201
	}, {
	category: "Germany",
	value: 165
	}]);

	// Set data
	// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
	series2.data.setAll([{
	category: "Lithuania",
	value: 201
	}, {
	category: "Czechia",
	value: 101
	}, {
	category: "Ireland",
	value: 51
	}, {
	category: "Germany",
	value: 15
	}]);



	function getSlice(dataItem, series) {
	var otherSlice;
	am5.array.each(series.dataItems, function(di) {
	if (di.get("category") === dataItem.get("category")) {
	otherSlice = di.get("slice");
	}
	});

	return otherSlice;
	}

	// Create legend
	var legend = root.container.children.push(am5.Legend.new(root, {
	x: am5.percent(50),
	centerX: am5.percent(50)
	}));


	// Trigger all the same for the 2nd series
	legend.itemContainers.template.events.on("pointerover", function(ev) {
	var dataItem = ev.target.dataItem.dataContext;
	var slice = getSlice(dataItem, series2);
	slice.hover();
	});

	legend.itemContainers.template.events.on("pointerout", function(ev) {
	var dataItem = ev.target.dataItem.dataContext;
	var slice = getSlice(dataItem, series2);
	slice.unhover();
	});

	legend.itemContainers.template.on("disabled", function(disabled, target) {
	var dataItem = target.dataItem.dataContext;
	var slice = getSlice(dataItem, series2);
	if (disabled) {
	series2.hideDataItem(slice.dataItem);
	}
	else {
	series2.showDataItem(slice.dataItem);
	}
	});

	legend.data.setAll(series.dataItems);

	series.appear(1000, 100);

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