在 Nativescript-UI-Chart 中动态设置线/样条的颜色？答案

【问题标题】：Dynamically set color of line/spline in Nativescript-UI-Chart?在 Nativescript-UI-Chart 中动态设置线/样条的颜色？
【发布时间】：2018-11-20 08:50:21
【问题描述】：

我需要将图表中每条线的颜色与提供数据的对象给出的颜色相匹配。 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>

此刻线得到一种颜色，而样条得到另一种颜色。但是，如果我有两条以上的线或样条线，则所有线都具有相同的颜色，并且所有样条线也具有相同的颜色。似乎添加的最后一行设置了两条线的颜色，样条线也是如此。

【问题讨论】：

标签： angular2-nativescript nativescript-telerik-ui

【解决方案1】：

我找到了解决问题的方法，我在 LineSeries 和 PaletteEntry 上都为 seriesName 添加了属性绑定，女巫将每一行动态匹配到一个 ID。 p>

我的代码更改：

<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>

【讨论】：