У меня есть линейчатая диаграмма кендо, которая должна иметь разные стили маркера для каждой точки данных.
У меня есть следующий шаблон (маркерType, размер и цвет границы жестко заданы, и я пытаюсь сделать его динамичным)
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item type="line" field="values" [data]="chartData">
<kendo-chart-series-item-markers [type]="markerType" [size]="30" [border]="{color: 'green'}">
</kendo-chart-series-item-markers>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
И следующий компонент
import { Component, OnInit, Input } from '@angular/core';
import { LineItem } from '../../../model/external-model';
import { MarkerType } from '@progress/kendo-angular-charts';
@Component({
selector: 'line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
categories: string[];
values: number[];
@Input() public chartData:LineItem[] = [];
public markerType: MarkerType = "cross";
constructor() { }
ngOnInit() {
this.categories = this.chartData.map(x => x.category);
this.values = this.chartData.map(x => x.values);
}
}
И LineItem, как показано ниже.
export interface LineItem {
category: string
values: number
marker: Marker
}
export interface Marker {
size: number
type: MarkerType
background: string
}
Мой ожидаемый результат - иметь линейную диаграмму, имеющую каждую точку данных различного размера, формы (круг, крест, треугольник, квадрат) и цвета границы.Поэтому я хотел бы связать размер, тип и фон маркера с маркерами kendo-chart-series-item-markers - тип, размер и граница.
Не удалось найти способ использовать dataItem (аналогично тому, как работает подсказка кендо) для получения отдельных значений точек данных.Как мне это реализовать?
Если вы используете 'визуальный' 'SeriesMarkers' единственный единственный способ реализовать это, пожалуйста, помогите мне с примером кода.