在RadCharts中使用本机脚本角度为每个栏显示不同的图例

时间:2019-03-03 17:09:42

标签: nativescript nativescript-angular radchart

am尝试使用不同的图例标签,用自己的颜色代表条形图中的每一列。正如您在屏幕快照中看到的那样,我无法显示其他图例。 enter image description here

每个也应具有不同的颜色。这是我的html。

            <CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
            <LinearAxis tkCartesianVerticalAxis allowPan="true"></LinearAxis>

            <BarSeries tkCartesianSeries [items]="LivestockData"
                categoryProperty="Year" valueProperty="Amount" seriesName="Bar" showLabels="true" legendTitle="Cattle"></BarSeries>

            <!-- >> chart-legend-angular-definition -->                   
            <RadLegendView tkCartesianLegend position="Bottom" title="Species"
                height="150" enableSelection="true"></RadLegendView>                    

            <!-- << chart-angular-styling-bars -->
            <Palette tkCartesianPalette seriesName="Bar">
                <PaletteEntry tkCartesianPaletteEntry fillColor="#A05BC5"></PaletteEntry>
            </Palette>

        </RadCartesianChart>

这是正在显示的数据。

    { species: "Cattle", Amount: 4771, Year: 1980 },
    { species: "Sheep and goats", Amount: 3862, Year: 2000 },
    { species: "Pigs", Amount: 187, Year: 2002 },
    { species: "Poultry", Amount: 2941, Year: 1990 }

物种属性值应该在图例中,但我只能显示牛的值,并且我也需要每种颜色。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:1)

here我为您准备了游乐场。要使条形具有多种颜色,您需要注释掉Palette部分,并在条形系列中添加paletteMode="Item"

<BarSeries tkCartesianSeries [items]="categoricalSource"
            categoryProperty="Year" paletteMode="Item" valueProperty="Amount"
            seriesName="Bar" legendTitle="Cattle" showLabels="true"></BarSeries>

Legend可以正常工作,因为它们表示系列类型,您可以修改每个系列的legendTitle。如果您想要多个图例,则需要添加多个Bar系列(针对您的情况下的每头牛。)