Nativescript图表如何显示带有负值的条形图

时间:2018-06-28 08:41:00

标签: nativescript angular2-nativescript nativescript-telerik-ui nativescript-angular

我希望我的条形图始终从零开始,如果正数总是上升,如果负数则下降。但是,柱线从最小范围开始并上升。如何使图形上的条形从零开始并向上或向下旋转(取决于值是正数还是负数)?

这是我的代码:

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="existing" seriesName="existing" legendTitle="Existing Members"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="onhold" seriesName="onhold" legendTitle="On Hold"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="new" seriesName="new" legendTitle="New Membership"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="rejoin" seriesName="rejoin" legendTitle="Rejoins"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="expired" seriesName="expired" legendTitle="Expired"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="cancelled" seriesName="cancelled" legendTitle="Cancelled"></BarSeries>

    <Palette tkCartesianPalette seriesName="existing">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(121,50,232,0.15)" strokeColor="rgba(121,50,232,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="onhold">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(255,215,0,0.15)" strokeColor="rgba(255,215,0,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="new">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(16,119,241,0.15)" strokeColor="rgba(16,119,241,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="rejoin">
            <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(135,193,132,0.15)" strokeColor="rgba(135,193,132,0.5)" strokeWidth="1"></PaletteEntry>
        </Palette>
    <Palette tkCartesianPalette seriesName="expired">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(119,119,119,0.15)" strokeColor="rgba(119,119,119,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="cancelled">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(255,153,153,0.15)" strokeColor="rgba(255,153,153,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
</RadCartesianChart>

已过期和已取消的序列的值为负。

1 个答案:

答案 0 :(得分:0)

尝试像这样在线性轴上添加最小和最大属性:

<LinearAxis tkCartesianVerticalAxis minimum="-50" maximum="50"></LinearAxis>