Как построить диаграмму Drill Down в Angular?

Диаграммы «сверления» широко используются для подробного отображения данных с дополнительной информацией. В диаграммах Drill-down отображается связь между родительскими и дочерними данными / диаграммой. Например: Диаграмма может показывать данные о продажах за год (2010, 2011, 2012,…), и если вы нажмете на любой год, она покажет месячные / квартальные данные за этот конкретный год. В этой статье я расскажу о том, как создать диаграмму сверления в angular с помощью CanvasJS angular chart.

Предварительные условия

1. Ангулярные диаграммы CanvasJS

Добавьте директивы CanvasJS в ваш проект

1. Скачайте CanvasJS по этой ссылке.
2. Добавьте файлы компонентов ангулярных диаграмм в ваш проект (canvasjs.min.js & canvasjs.angular.component.js).
3. Зарегистрируйте модуль CanvasJS

import { NgModule } from '@angular/core';
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
})
export class AppModule { }

Обратитесь к разделу Интеграция CanvasJS Angular для получения дополнительной информации / устранения неполадок.

Структурирование данных для сверления

CanvasJS принимает данные в формате JSON. Это не означает, что вы должны всегда хранить данные в файле JSON. Это просто означает, что данные должны быть разобраны в формат JSON перед передачей их в опции графика. Данные могут быть считаны либо из файлов JSON / XML / CSV, либо из локальной переменной JavaScript.
Для построения уменьшающейся диаграммы нам необходимо иметь родительские (годовые) и дочерние (квартальные) данные.

yearlyData: [{
  cursor: 'pointer',
  dataPoints: [
    {
      label: "2019",
      y: 191630,
      name: "2019",
      color: '#f2c80f'
    }, {
      label: "2020",
      y: 203770,
      name: "2020",
      color: '#fc625e'
    }, {
      label: "2021",
      y: 193700,
      name: "2021",
      color: '#01b8aa'
    }]
}],
drilldownData: {
    '2019': [{
      color: "#f2c80f",
      dataPoints: [
        { label: 'Q1', y: 48980 },
        { label: 'Q2', y: 42690 },
        { label: 'Q3', y: 46980 },
        { label: 'Q4', y: 52980 }
      ]
    }],
    '2020': [{
      color: '#fc625e',
      dataPoints: [
        { label: 'Q1', y: 51780 },
        { label: 'Q2', y: 48590 },
        { label: 'Q3', y: 52500 },
        { label: 'Q4', y: 50900 }
      ]
    }],
    '2021': [{
      color: '#01b8aa',
      dataPoints: [
        { label: 'Q1', y: 42600 },
        { label: 'Q2', y: 44960 },
        { label: 'Q3', y: 46160 },
        { label: 'Q4', y: 48240 }
      ]
    }]
}

Выполнить сверление по щелчку

Привяжите событие щелчка к точкам данных. Обновляйте данные графика при щелчке на точке данных и перерисовывайте график.

drilldownHandler = (e: any) => {
    this.chart.options = this.drilldownChartOptions;
    this.chart.options.data = this.options.drilldown[e.dataPoint.name];
    this.chart.options.title = { text: e.dataPoint.name };
    this.chart.render();
};

Добавьте кнопку для перехода назад после щелчка на любом столбце. Объединение вышеупомянутого кода позволит вам построить диаграмму с уменьшением глубины. Ниже приведен рабочий пример.