диаграмма кендо - изменение типа, размера и цвета отдельных маркеров на одной серии - PullRequest
Новая
       30

диаграмма кендо - изменение типа, размера и цвета отдельных маркеров на одной серии

1 голос
/ 28 сентября 2019

У меня есть линейчатая диаграмма кендо, которая должна иметь разные стили маркера для каждой точки данных.

У меня есть следующий шаблон (маркер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' единственный единственный способ реализовать это, пожалуйста, помогите мне с примером кода.

...