具有不同Y軸和軸標題的兩個數據集

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