Question

我一直在尝试使用nativescript + angular（本机UI图表）创建一个使用两组不同数据的图表。一个用于温度，另一个用于压力，每个都有自己的Y轴（一个向右，一个向左）我已经成功地做到了，要么使用bar作为压力，使用line作为温度，要么通过重叠两个图表。

当前是否无法使用相同类型的图形（在我的情况下为线性）显示两组数据？另外，是否可以为轴提供标题（例如C°，bar，sec）？

这是我的尝试

重叠：

<GridLayout rows="*">

<StackLayout row="0">
<StackLayout backgroundColor="rgb(66, 66, 66)">
<StackLayout orientation="horizontal" width="96%" height="100%">
    <DockLayout height="100%" width="100%">
        <RadCartesianChart class="cartesianChart0" backgroundColor="rgb(66, 66, 66)" >

        <BarSeries tkCartesianSeries stackMode="Stack" seriesName="Total">
            <LinearAxis tkBarVerticalAxis lineHidden="True" horizontalLocation="Right" 
            labelMargin="10"></LinearAxis>
        </BarSeries>    
        <CategoricalAxis tkCartesianHorizontalAxis ></CategoricalAxis>

        <LinearAxis tkCartesianVerticalAxis horizontalLocation="Left" labelMargin="10" ></LinearAxis>

        <LineSeries tkCartesianSeries stackMode="Stack" legendTitle="Fahrenheit" showLabels="true" 
        labelFormat="degrees" seriesName="Fahrenheit" [items]="fahrenheit" categoryProperty="time" 
        valueProperty="degrees"> </LineSeries>

        <LineSeries tkCartesianSeries stackMode="Stack" legendTitle="Celsius" showLabels="true" 
        seriesName="celsius" [items]="celsius" categoryProperty="time" valueProperty="degrees">
        </LineSeries>

        </RadCartesianChart>
    </DockLayout>
</StackLayout>
</StackLayout>
</StackLayout>

<StackLayout row="0">
<StackLayout orientation="horizontal" width="100%" height="100%">
    <DockLayout height="100%" width="100%">
        <RadCartesianChart class="cartesianChart0">

        <BarSeries tkCartesianSeries stackMode="Stack" seriesName="Total">
            <LinearAxis tkBarVerticalAxis lineHidden="True" horizontalLocation="Left" labelMargin="10"></LinearAxis>
        </BarSeries>    
        <CategoricalAxis tkCartesianHorizontalAxis hidden="True"></CategoricalAxis>

        <LinearAxis tkCartesianVerticalAxis horizontalLocation="Right" labelMargin="10" ></LinearAxis>

        <LineSeries tkCartesianSeries stackMode="Stack" legendTitle="Bars" showLabels="true" seriesName="bars" 
            [items]="pressure" categoryProperty="time" valueProperty="bars" lineColor= "blue">
        </LineSeries>
        </RadCartesianChart>
    </DockLayout>
</StackLayout>
</StackLayout>

</GridLayout>

线条和线条：

<StackLayout backgroundColor="rgb(66, 66, 66)">
    <StackLayout orientation="horizontal" width="100%" height="100%">
        <DockLayout height="100%" width="100%">
            <RadCartesianChart class="cartesianChart0" backgroundColor="rgb(66, 66, 66)" >
                <CategoricalAxis tkCartesianHorizontalAxis labelMargin="10"></CategoricalAxis>

                <LinearAxis tkCartesianVerticalAxis horizontalLocation="Left" ></LinearAxis>

                <RadLegendView tkCartesianLegend position="Top" title="Celsius, fahrenheit, bars vs seconds" 
                height="150" enableSelection="true"></RadLegendView>

                <BarSeries tkCartesianSeries stackMode="Stack" seriesName="Total" [items]="pressure"
                    categoryProperty="time" valueProperty="bars">
                        <LinearAxis tkBarVerticalAxis horizontalLocation="Right" ></LinearAxis>
                </BarSeries>

                <LineSeries tkCartesianSeries stackMode="Stack" legendTitle="Fahrenheit" showLabels="true" labelFormat="degrees" seriesName="Fahrenheit" 
                [items]="fahrenheit" categoryProperty="time" valueProperty="degrees">
                </LineSeries>

                <LineSeries tkCartesianSeries stackMode="Stack" legendTitle="Celsius" showLabels="true" seriesName="celsius" 
                [items]="celsius" categoryProperty="time" valueProperty="degrees">
                </LineSeries>

            </RadCartesianChart>
        </DockLayout>
    </StackLayout>
</StackLayout>

谢谢！

Answer 1

好的，在开发人员的帮助下，我能够解决它。垂直线性轴必须包含在其相应的线系列内。我自己尝试过的某事，但由于某种原因我无法解释，因此之前对我不起作用。

不过，如果有人知道如何在每个轴上方显示单位，那将非常有帮助。

这是解决方案代码：

html：

<ActionBar title="nativescript-ui-chart" class="action-bar">
</ActionBar>

<GridLayout>
    <ScrollView class="page">
        <StackLayout class="home-panel">
            <GridLayout rows="*" height="1000px">
                <RadCartesianChart row="0">
                    <CategoricalAxis tkCartesianHorizontalAxis
                        verticalLocation="Down"></CategoricalAxis>

                    <LineSeries tkCartesianSeries seriesName="RateA" [items]="categoricalSource" showLabels="true"
                        categoryProperty="time" valueProperty="celsius">
                        <LinearAxis tkLineVerticalAxis horizontalLocation="Left"></LinearAxis>
                    </LineSeries>

                    <LineSeries tkCartesianSeries seriesName="Total" [items]="categoricalSource" showLabels="true"
                        categoryProperty="time" valueProperty="pressure">
                        <LinearAxis tkLineVerticalAxis horizontalLocation="Right"></LinearAxis>
                    </LineSeries>
                </RadCartesianChart>
            </GridLayout>
        </StackLayout>
    </ScrollView>
</GridLayout>

打字稿：

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./chart.component.html",
})
export class ChartComponent implements OnInit {
    categoricalSource: { time: number, celsius: number, pressure: number }[] = [
        { time: 0 , celsius: 7, pressure: 1 },
        { time: 10, celsius: 15, pressure: 2 },
        { time: 20, celsius: 18, pressure: 5 },
        { time: 30, celsius: 20, pressure: 7 },
        { time: 40, celsius: 30, pressure: 10 }
    ];


    constructor() { }

    ngOnInit(): void { }
}

具有不同Y轴和轴标题的两个数据集

1 个答案: