Диаграммы «сверления» широко используются для подробного отображения данных с дополнительной информацией. В диаграммах Drill-down отображается связь между родительскими и дочерними данными / диаграммой. Например: Диаграмма может показывать данные о продажах за год (2010, 2011, 2012,…), и если вы нажмете на любой год, она покажет месячные / квартальные данные за этот конкретный год. В этой статье я расскажу о том, как создать диаграмму сверления в angular с помощью CanvasJS angular chart.
Предварительные условия
- Ангулярные диаграммы CanvasJS
Добавьте директивы CanvasJS в ваш проект
- Скачайте CanvasJS по этой ссылке.
- Добавьте файлы компонентов ангулярных диаграмм в ваш проект (canvasjs.min.js & canvasjs.angular.component.js).
- Зарегистрируйте модуль 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();
};
Добавьте кнопку для перехода назад после щелчка на любом столбце. Объединение вышеупомянутого кода позволит вам построить диаграмму с уменьшением глубины. Ниже приведен рабочий пример.