Динамически установить цвет линии / сплайна в Nativescript-UI-Chart? - PullRequest
Новая
       7

Динамически установить цвет линии / сплайна в Nativescript-UI-Chart?

0 голосов
/ 20 ноября 2018

Мне нужно сопоставить цвет каждой линии на графике с цветом, заданным объектом, предоставляющим данные.Переменная meter.color содержит нужный мне цвет. 

<StackLayout class="container" orientation="vertical">
    <Label class="title" [text]="widget.settings.title" horizontalAlignment="center"></Label>
    <RadCartesianChart class="chart" tkExampleTitle tkToggleNavButton>
        <ng-container *ngFor="let meter of readings$ | async">
            <ng-container [ngSwitch]="meter.type">

                <LineSeries tkCartesianSeries seriesName="Line" *ngSwitchCase="'line'" [legendTitle]="meter.name + ' - ' + meter.unit"
                    [items]="meter.data" stackMode="Stack" categoryProperty="timestamp" valueProperty="value">
                    <Palette tkCartesianPalette seriesName="Line">
                        <PaletteEntry tkCartesianPaletteEntry [strokeColor]="meter.color"></PaletteEntry>
                    </Palette>
                </LineSeries>

                <SplineSeries tkCartesianSeries seriesName="Spline" *ngSwitchCase="'spline'" [legendTitle]="meter.name"
                    [items]="meter.data" stackMode="Stack" categoryProperty="timestamp" valueProperty="value">
                    <Palette tkCartesianPalette seriesName="Spline">
                        <PaletteEntry tkCartesianPaletteEntry [strokeColor]="meter.color"></PaletteEntry>
                    </Palette>
                </SplineSeries>
                
            </ng-container>
            <RadLegendView tkCartesianLegend position="Top" title="Series" enableSelection="true"></RadLegendView>
            <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" verticalStrokeColor="#804d0026"></RadCartesianChartGrid>
            <LinearAxis tkCartesianVerticalAxis horizontalLocation="Left" android:labelFormat="%.0f"></LinearAxis>
            <DateTimeContinuousAxis tkCartesianHorizontalAxis dateFormat="hh:mm" [minimum]="backwardHour" [maximum]="forwardHour"
                majorStep="Hour" labelFitMode="Rotate"></DateTimeContinuousAxis>
        </ng-container>
    </RadCartesianChart>
</StackLayout>

В данный момент линия получает один цвет, а сплайн - другой.Но если у меня более двух линий или сплайнов, все линии получат одинаковый цвет, а все сплайны также получат одинаковый цвет.Кажется, что последняя добавленная строка устанавливает цвет обеих линий, то же самое относится и к сплайну.

1 Ответ

0 голосов
/ 20 ноября 2018

Я нашел решение своей проблемы, я добавил привязку свойства к seriesName как для LineSeries , так и для PaletteEntry , который динамически сопоставляет каждую строку с идентификатором.

Изменения в моем коде: 

<LineSeries tkCartesianSeries [seriesName]="meter.id" *ngSwitchCase="'line'" [legendTitle]="meter.name + ' - ' + register.unit" [items]="register.data" stackMode="Stack" categoryProperty="timestamp" valueProperty="value">
  <Palette tkCartesianPalette [seriesName]="meter.id">
    <PaletteEntry tkCartesianPaletteEntry [strokeColor]="meter.color"></PaletteEntry>
  </Palette>
</LineSeries>
...