Css 将Nativescript图表行设置为最大宽度

从下图可以看出，图表线并没有一直延伸到StackLayout容器的边缘。我曾尝试在StackLayout上添加负边距，但它们不一致，这取决于我在图表中的数据量，并且边距可能会波动。Android和iOS之间的利润率总是不同的

Nativescript示例： play.nativescript.org/？templay=ng&id=I8lOBP

这是坏版本：

在图中，您会注意到在右边缘和左边缘，有emulator窗口的黑色条带。我正在寻找一种方法，使红色区域线接触这些边缘。在图像中很难看到，但底部也需要接触StackLayout容器的底部

<StackLayout>
    <RadCartesianChart 
                height="100%"
                width="100%"
                class="default-background">
            <CategoricalAxis
                lineColor="#f5f5f5" 
                hidden="true" 
                lineHidden="true" 
                lineThickness="1"
                labelLayoutMode="Inner"
                tkCartesianHorizontalAxis>
            </CategoricalAxis>
            <LinearAxis
                lineColor="#f5f5f5"
                hidden="true" 
                lineHidden="true" 
                lineThickness="1"
                labelLayoutMode="Inner" 
                [maximum]="max"
                [minimum]="min"
                tkCartesianVerticalAxis>
            </LinearAxis>
            <AreaSeries
                tkCartesianSeries 
                seriesName="Area" 
                showLabels="false" 
                categoryProperty="Date" 
                [items]="areaSource$ | async"
                valueProperty="Amount" 
                selectionMode="None">
            </AreaSeries>
            <RadCartesianChartGrid 
                tkCartesianGrid 
                horizontalLinesVisible="false" 
                verticalLinesVisible="false" 
                verticalStripLinesVisible="false"
                horizontalStripLinesVisible="false" 
                horizontalStrokeColor="#181818">
            </RadCartesianChartGrid>
            <Palette tkCartesianPalette seriesName="Area">
                <PaletteEntry
                    tkCartesianPaletteEntry
                    opacity="1" 
                    [fillColor]="fillColor"
                    [strokeColor]="lineColor"
                    android:strokeWidth="4"
                    ios:strokeWidth="2">
                </PaletteEntry>
                <PaletteEntry 
                    tkCartesianPaletteEntry 
                    [fillColor]="fillColor" 
                    strokeColor="#181818" 
                    strokeWidth="0">
                </PaletteEntry>
            </Palette>
        </RadCartesianChart>
</StackLayout>

您应该设置horizontalZoom属性，可能会将其当前值增加约30%。
您应该设置horizontalZoom属性，可能会将其当前值增加约30%。
const screen=require（“tns核心模块/平台”）。screen；
const screen = require("tns-core-modules/platform").screen;

        let widthDIPs = screen.mainScreen.widthDIPs;

    <StackLayout>
    <RadCartesianChart 
                height="100%"
                [width]="widthDIPs"
                class="default-background">
            <CategoricalAxis
               (...)

让widthDIPs=screen.mainScreen.widthDIPs；
const screen=require（“tns核心模块/平台”）。屏幕；
让widthDIPs=screen.mainScreen.widthDIPs；
你能设置一个游乐场吗？你能从
ts
文件中发布图表的
source
数据吗？它是动态数据，格式是
[{Date:“01/19”，Amount:100}，{Date:“02/19”，Amount:200}，…]
我们能制作JSFIDLE还是把它放在某个地方，这样我们就能看到真实的例子？这将帮助我们更快地解决这个问题，因为我可以在操场上看到，空间似乎不是空的，也就是说，在左侧和右侧，实际分配用于渲染轴标签的空间。即使关闭可见性，空间仍会被占用。因为插件不是开源的，所以很难调试。你可以在上提出问题。你能设置一个游乐场吗？你能从
ts
文件中发布图表的数据
source
吗？它是动态数据，格式为
[{Date:'01/19]，Amount:100}，{Date:'02/19'，Amount:200}，]
能制作JSFIDLE还是把它放在某个地方，这样我们就可以看到活生生的例子？这将帮助我们更快地解决这个问题，因为我可以在操场上看到，空间似乎不是空的，也就是说，在左侧和右侧，实际分配用于渲染轴标签的空间。即使关闭可见性，空间仍会被占用。因为插件不是开源的，所以很难调试。你可以在上提出一个问题，我试试看。但我不确定它是否会保持一致。任何时候，只要我注意百分比、边距等，它就永远不会在设备上正确呈现。有些设备可能看起来不错，而另一些设备最终会出现间隙。它需要像
width=“100%”
那样工作，我们知道它会在每个设备上的布局边缘。我会尝试一下。但我不确定它是否会保持一致。任何时候，只要我注意百分比、边距等，它就永远不会在设备上正确呈现。有些设备可能看起来不错，而另一些设备最终会出现间隙。它需要像
width=“100%”
那样工作，我们知道它将进入每个设备的布局边缘。