Как добавить отдельные классы в разделы круговой диаграммы в amchart и использовать их для переключения другого элемента?

Question

Я пытаюсь добавить классы к отдельным сегментам в амхартах, и при нажатии на сегмент будет развернута диаграмма, а другой элемент под ней - это ли, чтобы раскрыть подсписок ul, относящийся к этому сегменту.Это также должно работать, когда я щелкаю по соответствующему заголовку или номеру, чтобы открыть тот сегмент, к которому он относится.

Есть ли простой способ сделать это?

У меня есть скрипка:https://jsfiddle.net/R567Web/pwr15hfy/10/

Спасибо

    <div id="chartdiv"></div>

    <div class="chartZoom">

        <ul class="domains-8">
                  <li><span class="number" data-domain="data-security">1</span>Data Security
                          <ul class="sub-list data-security">
                            <li>– Data classification</li>
                            <li>– User awareness and training</li>
                            <li>– Data protection</li>
                            <li>– Risk Management</li>
                            <li>– Governance</li>
                          </ul>
                  </li>
                  <li><span class="number" data-domain="access-control">2</span>Access Control
                          <ul class="sub-list access-control">
                            <li>– Two-Factor Authentication</li>
                            <li>– Password Configuration</li>
                            <li>– Access Management</li>
                          </ul></li>
                      <li><span class="number" data-domain="endpoint">3</span>Endpoint and Systems Security
                          <ul class="sub-list endpoint">
                           <li>– Endpoint Protection</li>
                           <li>– Vulnerability Management</li>
                           <li>– Asset Inventory</li>
                           <li>- Secure Configuration</li>
                           <li>- Logging and Monitoring</li>
                          </ul></li>

                      <li><span class="number" data-domain="network-security">4</span>Network Security
                          <ul class="sub-list network-security">
                           <li>– Network Environment</li>
                           <li>– Wireless</li>
                           <li>– Network Penetration Testing</li>
                           <li>- Network Capacity</li>
                          </ul></li>
                      <li><span class="number" data-domain="physical-security">5</span>Physical Security
                          <ul class="sub-list physical-security">
                           <li>– Physical Accesst</li>
                           <li>– Physical Penetration Testing</li>
                           <li>– Tampering & Alteration</li>
                           <li>- Environmental</li>
                          </ul></li>
                      <li><span class="number" data-domain="app-security">6</span>Application Security
                          <ul class="sub-list app-security">
                           <li>– Training</li>
                           <li>– Secure Development</li>
                           <li>– Software Management</li>
                          </ul></li>
                      <li><span class="number" data-domain="third-party">7</span>Third Party
                          <ul class="sub-list third-party">
                           <li>– Third Party Contracts</li>
                           <li>– Due Diligence</li>
                           <li>– Third Party Inventory</li>
                          </ul></li>
                      <li><span class="number" data-domain="business-reslience">8</span>Business Resilience
                          <ul class="sub-list business-reslience">
                           <li>– Business Continuity/DR</li>
                           <li>– Incident Response</li>
                           <li>– Backup</li>
                          </ul></li>
                </ul>
    </div>

var chart = am4core.create("chartdiv", am4charts.PieChart);

// Set data
var selected;
var types = [{
  type: "Data Security",
  percent: 14,
  color: "#6E267B",
  subs: [{
    type: "Data classification",
    percent: 20
  }, {
    type: "User awareness and training",
    percent: 20
  },{
    type: "Data protection",
    percent: 20
  },{
    type: "Risk Management",
    percent: 20
  }, {
    type: "Governance",
    percent: 20
  }]
}, {
  type: "Access Control",
  percent: 18,
  color: "#4D4F53",
  subs: [{
    type: "Two-Factor Authentication",
    percent: 33
  }, {
    type: "Password Configuration",
    percent: 33
  }, {
    type: "Access Management",
    percent: 33
  }]
},
{
  type: "Endpoint and Systems Security",
  percent: 14,
  color: "#003F72",
  subs: [{
    type: "Endpoint Protection",
    percent: 20
  }, {
    type: "Vulnerability Management",
    percent: 20
  }, {
    type: "Asset Inventory",
    percent: 20
  }, {
    type: "Secure Configuration",
    percent: 20
  },{
    type: "Logging and Monitoring",
    percent: 20
  }]
},
{
  type: "Network Security",
  percent: 16,
  color: "#0083A9",
  subs: [{
    type: "Network Environment",
    percent: 25
  }, {
    type: "Wireless",
    percent: 25
  }, {
    type: "Network Penetration Testing",
    percent: 25
  }, {
    type: "Network Capacity",
    percent: 25
  }]
},
{
  type: "Physical Security",
  percent: 16,
  color: "#E11B22",
  subs: [{
    type: "Physical Access",
    percent: 33
  }, {
    type: "Physical Penetration Testing",
    percent: 33
  }, {
    type: "Tampering & Alteration",
    percent: 33
  }, {
    type: "Environmental",
    percent: 33
  }]
},
{
  type: "Application Security",
  percent: 14,
  color: "#0039A6",
  subs: [{
    type: "Training",
    percent: 33
  }, {
    type: "Secure Development",
    percent: 33
  }, {
    type: "Software Management",
    percent: 33
  }]
},
{
  type: "Third Party",
  percent: 12,
  color: "#5EB6E4",
  subs: [{
    type: "Third Party Contracts",
    percent: 33
  }, {
    type: "Due Diligence",
    percent: 33
  }, {
    type: "Third Party Inventory",
    percent: 33
  }]
},
{
  type: "Business Resilience",
  percent: 18,
  color: "#C9CAC8",
  subs: [{
    type: "Business Continuity/DR",
    percent: 33
  }, {
    type: "Incident Response",
    percent: 33
  }, {
    type: "Backup",
    percent: 33
  }]
}

];

// Add data
chart.data = generateChartData();

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "percent";
pieSeries.dataFields.radiusValue = "percent";
pieSeries.dataFields.category = "type";
pieSeries.slices.template.propertyFields.fill = "color";
pieSeries.slices.template.propertyFields.isActive = "pulled";
pieSeries.slices.template.strokeWidth = 0;
pieSeries.alignLabels = false;
pieSeries.labels.template.text = "{type}";
pieSeries.slices.template.tooltipText = "{type}";
am4core.options.autoSetClassName = true;

function generateChartData() {
  var chartData = [];
  for (var i = 0; i < types.length; i++) {
    if (i == selected) {
      for (var x = 0; x < types[i].subs.length; x++) {
        chartData.push({
          type: types[i].subs[x].type,
          percent: types[i].subs[x].percent,
          color: types[i].color,
          pulled: true
        });
      }
    } else {
      chartData.push({
        type: types[i].type,
        percent: types[i].percent,
        color: types[i].color,
        id: i
      });
    }
  }
  return chartData;
}

pieSeries.slices.template.events.on("hit", function(event) {
  if (event.target.dataItem.dataContext.id != undefined) {
    selected = event.target.dataItem.dataContext.id;

  } else {
    selected = undefined;
  }
  chart.data = generateChartData();
});

#chartdiv {
  color:$black;         
  width   : 100%;
  height    : 600px;
  font-size : 12px;
} 

.amcharts-chart-div > a {
    display: none !important;
}

ul.domains-8 {
  list-style: none;
  padding: 0;
  margin:0;
}
  ul.domains-8 li {

    font-family: Prelo Slab W01 Bold,serif;
    font-size: 20px;
    color: black;
}
   ul.domains-8 li span.number {
      background-color:purple;
      width:50px;
      height:50px;
      border-radius:50%;
      margin:10px;
      position:relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: Prelo Slab W01 Bold,serif;
    }

    ul.domains-8 li ul {
      list-style: none;
      padding-left: 60px;
      margin-top: -20px;
      display: none;
}
      ul.domains-8 li ul li {
        font-family: Prelo Slab W01 Light;
      }

    }
  }
  }

'''