创建多色NativeScript BarSeries堆叠条形图的步骤如下:
tns plugin add nativescript-ui-chart
import { BarSeries } from 'nativescript-ui-chart';
const data = [
{ name: 'Series 1', values: [10, 20, 30, 40] },
{ name: 'Series 2', values: [15, 25, 35, 45] },
{ name: 'Series 3', values: [5, 15, 25, 35] }
];
const options = {
series: [
{ name: 'Series 1', fillColor: '#FF0000' },
{ name: 'Series 2', fillColor: '#00FF00' },
{ name: 'Series 3', fillColor: '#0000FF' }
],
stackMode: 'stack'
};
在上述配置中,每个系列都指定了一个唯一的名称和填充颜色。stackMode
属性设置为stack
表示堆叠模式。
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<GridLayout>
<RadCartesianChart>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<BarSeries tkCartesianSeries [items]="data" stackMode="stack" categoryProperty="name" valueProperty="values" [series]="options.series"></BarSeries>
</RadCartesianChart>
</GridLayout>
</Page>
在上述代码中,[items]
属性绑定了数据源,[series]
属性绑定了配置对象中的系列。
pageLoaded
事件中将它们绑定到页面的上下文中。例如:import { Observable } from 'tns-core-modules/data/observable';
export function pageLoaded(args) {
const page = args.object;
const viewModel = new Observable();
viewModel.set('data', data);
viewModel.set('options', options);
page.bindingContext = viewModel;
}
通过以上步骤,就可以创建一个多色的NativeScript BarSeries堆叠条形图。根据实际需求,可以调整数据源和配置对象中的属性来满足不同的需求。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云