Два набора данных с разными осями Y и заголовком оси

Я пытался создать, используя nativescript + angular (собственный график пользовательского интерфейса), диаграмму, которая использует два разных набора данных. Один для температуры, другой для давления, каждый со своей осью Y (одна правая и одна левая). Мне удалось сделать это либо с помощью бара для давления и линии для температуры, либо путем наложения двух графиков.

В настоящее время невозможно отобразить два набора данных, используя один и тот же график (линейный в моем случае)? Кроме того, можно ли указать заголовок оси (например: C°, бар, сек)?

Вот мои попытки

Перекрытие:

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

Благодарю вас!


nativescript angular charts nativescript-telerik-ui
person Jose Meseguer    schedule 12.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я смог решить это благодаря помощи разработчиков. Вертикальные линейные оси должны были быть включены в соответствующие серии линий. То, что я пробовал сам, но по причине, которую я не могу объяснить, у меня раньше не работало.

Тем не менее, если кто-то знает, как показать единицу измерения над каждой осью, это было бы очень полезно.

Вот код решения:

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 { }
}
person Jose Meseguer    schedule 14.02.2019