时间戳

首页 > 解决方案 > 如何创建多色 NativeScript BarSeries 堆叠条形图

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

问题描述

我无法为每个 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>

这是视图的 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 指定的颜色。

标签： nativescript

解决方案

这是您的示例游乐场。

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

和.ts

data1 = [
    { key: "One", value: 5 },
    { key: "Two", value: 5 },
    { key: "Three", value: 5 }
];
data2 = [
    { key: "One", value: 10 },
    { key: "Two", value: 8 },
    { key: "Three", value: 5 }
];

可能是，你的颜色代码有问题，它在 ios 上对我来说工作得很好。

推荐阅读