Nativescript-vue，如何更改 BarSeries(Radchart) 图形“条形”颜色？

Posted 2023-04-14

【中文标题】Nativescript-vue，如何更改 BarSeries(Radchart) 图形“条形”颜色？

【英文标题】：Nativescript-vue, How to change BarSeries(Radchart) graph "bars" color?

【发布时间】：2019-08-06 04:53:45

【问题描述】：

代码：

<BarSeries v-tkCartesianSeries
             categoryProperty="Country"
             valueProperty="Amount"
             :items="items1" />
<CategoricalAxis v-tkCartesianVerticalAxis />
<LinearAxis v-tkCartesianHorizontalAxis />

【参考方案1】：

你必须用相同的系列名称定义Palette

            <BarSeries v-tkCartesianSeries :items="items1"
                categoryProperty="Country" valueProperty="Amount"
                seriesName="myLine" />
            <Palette v-tkCartesianPalette seriesName="myLine">
                <PaletteEntry v-tkCartesianPaletteEntry strokeWidth="5"
                    strokeColor="red" fillColor="red"></PaletteEntry>
            </Palette>
            <CategoricalAxis v-tkCartesianHorizontalAxis />
            <LinearAxis v-tkCartesianVerticalAxis />

【讨论】：

你不需要调色板

【参考方案2】：

只需在 BarSeries 中使用 fillColor 和 strokeColor

<RadCartesianChart>
   <CategoricalAxis v-tkCartesianHorizontalAxis />
   <LinearAxis v-tkCartesianVerticalAxis />
   <BarSeries v-tkCartesianSeries :items="items" categoryProperty="" valueProperty="" fillColor="red" />
</RadCartesianChart>