Amcharts -Treemap 图表如何获取工具提示值和点击事件

如何解决Amcharts -Treemap 图表如何获取工具提示值和点击事件

我在我的 angular 应用中使用 Amcharts。我已经使用了树形图并且它工作正常。我正在使用 tooltipHTML 属性来创建自定义工具提示。我想根据正负值以红色或绿色显示值并获取单击事件的当前工具提示值。我尝试使用 {name} 这种语法访问值，但它表示一个简单的字符串，而不是实际值。 我不知道如何实现这一点，附上截图和代码。任何建议将不胜感激。

  ngAfterViewInit(): void {
    if (this.chartData) {
      this.zone.runOutsideAngular(() => {
        const chart = am4core.create(this.treeMap.nativeElement,am4charts.TreeMap);

        chart.hiddenState.properties.opacity = 0;
        chart.logo.disabled = true; // hide the logo

        chart.data = this.chartData;
        chart.colors.step = 2;

        // define data fields
        chart.datafields.value = 'value';
        // chart.datafields.name = 'name';
        chart.datafields.children = 'children';
        chart.datafields.color = 'color';

        chart.layoutAlgorithm = chart.binaryTree;

        chart.zoomable = false;

        // level 0 series template
        const level0Seriestemplate = chart.seriestemplates.create('0');
        const level0ColumnTemplate = level0Seriestemplate.columns.template;

        level0ColumnTemplate.column.cornerRadius(0,0);
        level0ColumnTemplate.fillOpacity = 0;
        level0ColumnTemplate.strokeWidth = 4;
        level0ColumnTemplate.strokeOpacity = 0;

        // level 1 series template
        const level1Seriestemplate = chart.seriestemplates.create('1');
        const level1ColumnTemplate = level1Seriestemplate.columns.template;

        level1Seriestemplate.tooltip.animationDuration = 0;
        level1Seriestemplate.strokeOpacity = 1;

        level1ColumnTemplate.column.cornerRadius(0,0);
        level1ColumnTemplate.fillOpacity = 1;
        level1ColumnTemplate.strokeWidth = 4;
        level1ColumnTemplate.stroke = am4core.color('#ffffff');
        // level1ColumnTemplate.showTooltipOn = "always";
        level1Seriestemplate.tooltip.pointerOrientation = 'up';
        level1Seriestemplate.tooltip.getFillFromObject = false;
        level1Seriestemplate.tooltip.background.fill = am4core.color('#FFFFFF');

        level1Seriestemplate.tooltip.autoTextColor = false;
        level1Seriestemplate.tooltip.label.fill = am4core.color('#000000');

        level1ColumnTemplate.tooltipHTML = `<b><span style="font-size: 16px">{name}</span></b><hr style="margin-top: 5px; border-top: 1px dotted #999999;"> <div style="font-size: 16px"><span style="color: #999999">Change</span><br><span>{perchange}% </span> <span>(₹ {diffChange} Cr.)</span><br><br><span style="color: #999999">Total Market Cap</span><br><span>₹ {value} Cr.</span></div> <hr style="margin-top: 12px; margin-bottom:12px; border-top: 1px dotted #999999;"><a style="font-weight: bold; font-size: 20px; color: #f26f21">View Sector</a>`;
        level1Seriestemplate.tooltip.dy = -15;

        chart.seriesContainer.events.on("hit",(ev) => {
          console.log(ev.target)
        });

        const bullet1 = level1Seriestemplate.bullets.push(new am4charts.LabelBullet());
        bullet1.locationY = 0.5;
        bullet1.locationX = 0.5;
        bullet1.label.text = '{name}';
        bullet1.label.fill = am4core.color('#000000');
        bullet1.label.fontWeight = '400';
        chart.maxLevels = 2;
      });
    }
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.charts) {
        this.charts.dispose();
      }
    });
  }