Chart v2
Назначение
Chart v2 - отображение графиков.
Свойства
Компонента имеет набор общих свойств. Ниже отображены свойства, специфичные только для данной компоненты.
| Наименование свойства | Назначение свойства | Принимаемые значения | |
|---|---|---|---|
| legendPosition | Расположение описания графика. Если не задано, то описание не отображается | ‘top’, ‘left’, ‘bottom’, ‘right’ | |
| legendAlign | Выравнивание описания графика | ‘start’, ‘center’, ‘end’. По умолчанию ‘center’ | |
| loadOnStart | Загружать данные при инициализации | true, false. По умолчанию - true | |
| chartType | Тип графика. Для типов графиков LINE, BAR, HORIZONTAL_BAR задаётся dataSetServices, для типов PIE, DOUGHNUT задаётся dataSetService | LINE, PIE, DOUGHNUT, BAR, HORIZONTAL_BAR | |
| datasetType | Тип подгрузки данных: с агрегацией (AGGREGATION) или нет (STATIC) | STATIC, AGGREGATION | |
| chartType | Подтип графика. Сценарий использования - необходимо отобразить столбчатую диаграмму внутри линейной. Основной тип - линейная, подтип - столбчатая | LINE, BAR, HORIZONTAL_BAR | |
| scales | Шкалы. По умолчанию шкала по Х и шкала по У создаётся автоматически. Необходимо задавать, если нужно отобразить более 1 шкалы. | ||
| Scale.ScaleId | Идентификатор шкалы | ||
| Scale.Position | Расположение шкалы | ||
| Scale.Display | Отображать или нет шкалу | ||
| Scale.Type | TODO: | ||
| Scale.BeginAtZero | TODO: | ||
| Scale.Stacked | TODO: | ||
| Scale.GridSettings.DrawOnChartArea | TODO: | ||
| Scale.TickFormatter | Форматирование шкалы | TickFormatter | |
| dataLabel | |||
| dataColumn | Колонка с данными | ||
| dataColumnFormatter | Тип форматирование данных | ||
| labelColumn | Колонка с подписью данных | ||
| labelColumnFormatter | Тип форматирование подписи | ||
| backgroundColor | Цвет фона | ||
| borderColor | Цвет границы | ||
| xAxesId | идентификатор шкалы Х. Идентификаторы задаются в scales | ||
| yAxesId | идентификатор шкалы У. Идентификаторы задаются в scales | ||
| tension | Сглаживание данных. 0 - без сглаживания | ||
| columnSorts | Колонки для сортировки данных | ||
| aggregationDataSet.aggregationFunction | Функция агрегации. Задаётся только в aggregationDataSet | MIN, MAX, AVG, COUNT, SUM | |
| aggregationDataSet.groupByColumns | Колонки группировки. Задаётся только в aggregationDataSet | ||
| hoverRadius | Размер точки при наведении | ||
| hoverBackgroundColor | Цвет точки при наведении | ||
| noDataText | Текст для вывода сообщения на графике при отсутствии данных | ‘Нет данных для отображения’ | |
| noDataFont | Шрифт текста сообщения | ‘20px Arial’ | |
| noDataStyle | Стиль текста сообщения | ‘rgb(100,100,100)’ |
TickFormatter
Назначение
Для настройки шкал в ChartV2 есть возможность выбрать TickFormatter, с помощью которого на клиентской части можно настраивать отображение данных в шкале.
Свойства
| Наименование свойства | Назначение свойства | Принимаемые значения |
|---|---|---|
| Script | Форматирование исходных данных для корректного отображения. Форматирование будет применяться к значению шкалы. | Принимает один из возможных форматеров (см. раздел Tick Formatters ниже). |
Tick Formatters
| Наименование форматера | Назначение форматера | Настраиваемые значения |
|---|---|---|
| SuffixFormatter | Добавляет до и после значения заданные префикс и суффикс. | Prefix, Postfix. |
| NumberSuffixFormatter | Добавляет до и после значения заданные префикс и суффикс, форматирует число по заданным критериям. | Prefix, Postfix, Decimal Delimiter, Decimal Length, Sections Delimiter, Sections Length. |
ChartV2AdditionalElementProvider
В компоненту ChartV2 есть возможность добавить скрипт, который будет отрисовывать на графике любые дополнительные элементы (напр. количество скрытых дней при нажатии на кнопку “скрыть все”).
Для того чтобы создать скрипт, необходимо отнаследоваться от класса ChartV2AdditionalElementProvider и реализовать метод addAdditionalElement();
Прим. реализации, которая добавляет надпись.
addAdditionalElement(chartV2: ChartV2): void {
let chart = chartV2.chart;
let ctx = chart.ctx;
let width = chart.width;
let height = chart.height;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = this.font;
ctx.fillStyle = this.style;
ctx.fillText("Some text", width / 2, height / 2);
ctx.restore();
}
}