Могу ли я добавить дополнительные или пользовательские поля данных в диаграмму ap ie в AmCharts? - PullRequest
Новая
       44

Могу ли я добавить дополнительные или пользовательские поля данных в диаграмму ap ie в AmCharts?

1 голос
/ 13 января 2020

В настоящее время я переписываю устаревшее приложение, которое использует AngularJS и google-charts, чтобы теперь использовать Angular и AmCharts.

Для наших диаграмм в устаревшем приложении Данные, используемые для визуализации наших графиков, представляют собой «Продажи» ИЛИ «Единицы». Но для всплывающих подсказок нам нравится показывать значения как «Продажи», так и «Единицы». Это всплывающая подсказка из одной из наших диаграмм, показывающая продажи для определенного продукта: Подсказка по устаревшей диаграмме

Мне удалось воспроизвести ее с помощью линейного графика, но я не смог с графиком ap ie.

Код, используемый для линейного графика, со всплывающей подсказкой, отображающей «Продажи» и «Единицы»: 

...
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» чтобы получить значение единиц для добавления в мою подсказку, даже если диаграмма только визуально отображает данные о продажах.

Диаграмма p ie, похоже, не имеет никаких полей данных, которые я могу использовать для этого, кроме ' значение "или" категория ". В настоящее время для моей диаграммы p ie у меня есть что-то вроде: 

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.

1 Ответ

1 голос
/ 14 января 2020

Оказалось, что я просто подумал и ожидал, что это будет сложнее, чем есть на самом деле. Вот код, который работает: 

      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}' внутри метки / всплывающей подсказки.

...