在AmCharts中，我可以向饼图中添加其他或自定义的dataField吗？

Question

我目前正在重写使用AngularJS和google-charts的旧版应用程序，现在可以使用Angular和AmCharts。

对于旧应用程序中的图表，用于呈现图表的数据为'Sales'OR'Units'。但是对于工具提示，我们希望同时显示“销售”和“单位”的值。这是我们其中一个图表的工具提示，其中显示了特定产品的销售：Legacy chart tooltip

我能够使用折线图复制它，但是无法使用饼形图。

代码i用于折线图的工具提示显示“销售”和“单位”：

...
chart.data = this.data

function createDollarAxis(field, name, unit, opposite) {
  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.valueX = unit;
  series.dataFields.dateX = 'date';
  series.strokeWidth = 2;
  series.name = name;
  series.tensionX = 0.8;
  series.tooltipHTML = `
       <div style="text-align:center">
         <p style="border-bottom:1px solid; margin:0px 10px 10px">
           {date}
         </p>
         <strong>{name}</strong>
         </br>
         <p style="display:inline;margin:0">
           Units: {valueX}
         </p>
         <div style="display:inline-block;width:10px"></div>
         <p style="display:inline;margin:0">
           Sales: {valueY}
         </p>
       </div>
      `
   ...
}

createDollarAxis('name', 'dollars', 'units', false);

即使图表仅直观地显示销售数据，我也可以使用'valueX'数据字段来获取要添加到我的工具提示中的单位值。

除了“值”或“类别”外，饼图似乎没有其他可用于此目的的dataFields。目前，对于我的饼图，我有一些类似的东西：

let chart = am4core.create(this.chartid, am4charts.PieChart);
chart.data = this.data;

function createPieSlice(name: string, data: string, data2: string) {
  let pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = data;
  pieSeries.dataFields.category = name;
  ...

  pieSeries.slices.template.tooltipHTML = `
    <div style="text-align:left;margin:5px;">
      <strong style="color:white;">{category} - {value.percent.formatNumber('#.0')}</strong>
      <br/>
      <p style="display:inline;margin:0;color:white;">
        Gross Dollars: $ {value.value.formatNumber('###,###,###.00')}
      </p>
      <br/>
      <p style="display:inline;margin:0;color:white;">
        Gross Units: { <need 'units' data here> }
      </p>
    </div>
  `
 ...
}

// create slices with above function
createPieSlice('category', 'sales', 'units');

是否可以将其他dataField（或其他类型）添加到PieSeries？任何信息将不胜感激。

我正在使用AmCharts 4.7.17和Angular 8.0.0。

Answer 1

      function createPieSlice(name: string, data:string) {
        // Create slices
        let pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = data;
        pieSeries.dataFields.category = name;

        pieSeries.ticks.template.disabled = true;
        pieSeries.alignLabels = false;

        // Add inner labels to pie slices
        pieSeries.labels.template.text = `{value.percent.formatNumber('#.0')}%`;
        pieSeries.labels.template.radius = am4core.percent(-25);
        pieSeries.labels.template.fill = am4core.color('white');

        // These functions are here so the inner labels don't show whenever the slice is less than 5 percent
        pieSeries.labels.template.adapter.add('radius', function(radius, target) {
          if (target.dataItem && (target.dataItem.values.value.percent < 5)) {
            target.dataItem.label.text = '';
            return 0;
          }
          return radius;
        });

        pieSeries.labels.template.adapter.add('fill', function(color, target) {
          if (target.dataItem && (target.dataItem.values.value.percent < 5)) {
            return am4core.color('white');
          }
          return color;
        });

        // Custom Tooltip styling
        pieSeries.slices.template.tooltipHTML = `
            <div style="text-align:left;margin:5px;">
              <strong style="color:white;">{category} - {value.percent.formatNumber('#.0')}% </strong>
              <br/>
              <p style="display:inline;margin:0;color:white;">
                Gross Dollars: $ {value.value.formatNumber('###,###,###.00')}
              </p>
              <br/>
              <p style="display:inline;margin:0;color:white;">
                Gross Units: {units} //You just need to add the key. Doh!
              </p>
            </div>
          `
        pieSeries.tooltip.getFillFromObject = false;
        pieSeries.tooltip.background.fill = am4core.color('black');
        pieSeries.tooltip.pointerOrientation = 'vertical';

        // Adds a border around each slice
        pieSeries.slices.template.stroke = am4core.color('#fff')
        pieSeries.slices.template.strokeWidth = 0.5;
        pieSeries.slices.template.strokeOpacity = 1;
        pieSeries.slices.template
          .cursorOverStyle = [

            {
              'property': 'cursor',
              'value': 'pointer'
            }
          ];

        // Center label with total
        let label = pieSeries.createChild(am4core.Label);
        label.text = `$[BOLD]{values.value.sum.formatNumber('###,###,###.00')}`;
        label.horizontalCenter = 'middle';
        label.verticalCenter = 'middle';
        label.fontSize = 15;
      }


      createPieSlice('retailer', 'sales');
...

因此，您需要为工具提示做的就是添加要显示的任何数据值的键，因此，由于我的数据看起来像{ retailer: 'blah', sales: 999, units: 999 }，因此您需要做的就是在标签/中添加'{units}'/工具提示。