在 AmCharts 中，我可以向饼图添加额外的或自定义的数据字段吗？

Question

我目前正在重写一个使用 AngularJS 和 google-charts 的遗留应用程序，现在使用 Angular 和 AmCharts。

对于遗留应用程序中的图表，用于呈现图表的数据是 'Sales' 或 'Units'。但是对于工具提示，我们希望同时显示 'Sales' 和 'Units' 的值。这是我们图表之一的工具提示，显示特定产品的销售额：Legacy chart tooltip

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

我用于折线图的代码，带有显示 'Sales' 和 'Units' 的工具提示：

...
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' 数据字段来获取单位值以添加到我的工具提示中，即使图表仅直观地显示销售数据。

除了 'value' 或 'category' 之外，饼图似乎没有任何我可以用于此的数据字段。目前，对于我的饼图，我有一些类似的东西：

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');

有没有办法向 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} ' 在 label/tooltip.

中

在 AmCharts 中，我可以向饼图添加额外的或自定义的数据字段吗？

In AmCharts, can I add additional or custom dataFields to a pie chart?

angular

charts

pie-chart

amcharts

amcharts4