Question

我无法为每个BarSeries创建具有不同颜色的堆叠条形图。这是nativescript-ui RadChart组件的限制吗？

这是我正在使用的XML ...

<chart:RadCartesianChart id="productionSummaryChart" height="200" loaded="onLoaded">
  <chart:RadCartesianChart.horizontalAxis>
    <chart:CategoricalAxis/>
  </chart:RadCartesianChart.horizontalAxis>
  <chart:RadCartesianChart.verticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.verticalAxis>
  <chart:RadCartesianChart.series>
    <chart:BarSeries seriesName="Bar1" items="{{ data1 }}" stackMode="Stack" paletteMode="Item" categoryProperty="key" valueProperty="value"/>
    <chart:BarSeries seriesName="Bar2" items="{{ data2 }}" stackMode="Stack" paletteMode="Item" categoryProperty="key" valueProperty="value"/>
  </chart:RadCartesianChart.series>
  <chart:RadCartesianChart.palettes>
    <chart:Palette seriesName="Bar1">
      <chart:Palette.entries>
        <chart:PaletteEntry strokeColor="#F08080" fillColor="#F08080"/>
        <chart:PaletteEntry strokeColor="#D0D0D0" fillColor="#D0D0D0"/>
      </chart:Palette.entries>
    </chart:Palette>
    <chart:Palette seriesName="Bar2">
      <chart:Palette.entries>
        <chart:PaletteEntry strokeColor="#E09070" fillColor="#E09070"/>
        <chart:PaletteEntry strokeColor="#D0D0D0" fillColor="#D0D0D0"/>
      </chart:Palette.entries>
    </chart:Palette>
  </chart:RadCartesianChart.palettes>
</chart:RadCartesianChart>

这是View的TS代码...

var Observable = require('tns-core-modules/data/observable').Observable;

var viewModel = new Observable();
viewModel.data1 = [
  { key: "One", value: 10 },
  { key: "Two", value: 5 }
];
viewModel.data2 = [
  { key: "One", value: 7 },
  { key: "Two", value: 8 }
];

export function onLoaded(args) {
  var view = args.object;
  view.bindingContext = viewModel;
};

我希望看到第一个堆叠条具有4种颜色，第二个堆叠条具有相同的颜色...但是相反，两个堆叠条都具有一种颜色，第一个堆叠条是为最后一个BarSeries指定的颜色。 / p>

Answer 1

这是给您的示例playground。

 Bore Size Caculator
========================
Would you like to determine the bore-size (B) or the volume (V) of the tunnel or exist (Q)? B
What is the minimum volume that is required? (cubic metres): 20
How long do you need the tunnel to be? (metres): 1000
3.14159265358979
1000.0
Bore radius size required: 0.25
Exact volume produced (with bore-size above and the tunnel legnth specified) 196.35
========================
Would you like to determine the bore-size (B) or the volume (V) of the tunnel or exist (Q)? B
What is the minimum volume that is required? (cubic metres): ABBDBDBBBF
Please input a valid number
What is the minimum volume that is required? (cubic metres): 12
How long do you need the tunnel to be? (metres): 200
3.14159265358979
200.0
Bore radius size required: 0.25
Exact volume produced (with bore-size above and the tunnel legnth specified) 39.27
========================
Would you like to determine the bore-size (B) or the volume (V) of the tunnel or exist (Q)? Q
========================

和.ts

<chart:RadCartesianChart.palettes>
            <chart:Palette seriesName="Bar1">
                <chart:Palette.entries>
                    <chart:PaletteEntry strokeColor="Orange" fillColor="Yellow" />
                    <chart:PaletteEntry strokeColor="Pink" fillColor="Green" />
                    <chart:PaletteEntry strokeColor="red" fillColor="black" />
                </chart:Palette.entries>
            </chart:Palette>
            <chart:Palette seriesName="Bar2">
                <chart:Palette.entries>
                    <chart:PaletteEntry strokeColor="red" fillColor="blue" />
                    <chart:PaletteEntry strokeColor="red" fillColor="blue" />
                    <chart:PaletteEntry strokeColor="yellow" fillColor="green" />
                </chart:Palette.entries>
            </chart:Palette>
        </chart:RadCartesianChart.palettes>

也许是，您的颜色代码有问题，并且在ios上对我来说绝对正常。

如何创建多色的NativeScript BarSeries堆叠条形图

1 个答案: