Question

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

此刻，直线变为一种颜色，样条曲线变为另一种颜色。但是，如果我有多于两条线或样条线，则所有线都将具有相同的颜色，而所有样条线也将具有相同的颜色。似乎最后添加的行设置了两行的颜色，样条线也是如此。

Answer 1

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

代码更改：

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

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

1 个答案: