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

【问题标题】：Nativescript chart how to show bar graph with negative valuesNativescript图表如何显示带有负值的条形图
【发布时间】：2018-06-28 08:41:00
【问题描述】：

我希望我的条形图始终从零开始，如果为正则上升，如果为负则下降。但柱线从最小范围开始并上升。如何使图表上的条形图从零开始并根据值是正值还是负值向上或向下旋转？

这是我的代码：

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

过期和取消的连续剧有负值。

【问题讨论】：

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

【解决方案1】：

尝试像这样向线性轴添加最小和最大属性：

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

【讨论】：

现在的问题是，我事先不知道最小值和最大值。
@Ryan 使用 OnInit 计算所需的值并将它们存储在 .ts 文件中的变量中，然后使用 {{ variableName }} 从 .html 文件中访问该变量。