如何在LightningChart中交换X/Y轴实现AreaSeries垂直显示？

我正在使用LightningChart库，想要创建一个绑定AreaSeries的ChartXY。用React+TypeScript编写的代码运行正常，能得到预期的水平AreaSeries图表，但希望将图表旋转90度变为垂直显示。

原代码如下：

import { useEffect, useRef } from 'react';

import {
    lightningChart,
    ChartXY,
    Dashboard,
    emptyFill,
    AreaSeries,
    AreaSeriesTypes
} from "@arction/lcjs";

import './ChartTest.scss';


const ChartTest = () => {
    const chartRef = useRef(null);
    
    const dashboard = useRef<Dashboard|null>(null);
    const scallingChart2 = useRef<ChartXY|null>(null);
    const scallingChart2Serie = useRef<AreaSeries|null>(null);

    const initializeDashboard = (container:HTMLDivElement) => {
        const dashboard = lightningChart()
            .Dashboard({
                numberOfColumns: 1,
                numberOfRows: 1,
                container: container
            })
            .setRowHeight(0, 3)
            .setRowHeight(1, 1)
            .setColumnWidth(0,12)
            .setColumnWidth(1,1);

        return dashboard;
    }

    const initializeScallingChart = (dashboard:Dashboard) => {
        const chart = dashboard.createChartXY({
            columnIndex: 0,
            rowIndex: 0
        })
        .setTitleFillStyle(emptyFill)
        .setTitleMargin({ top: 0, bottom: 0 })
        .setPadding(0)

        return chart;
    }

    const renderScalingChart = (chart:ChartXY) => {
        const series = chart
            .addAreaSeries({
                type: AreaSeriesTypes.Bipolar,
            })

        for (let i=0; i<100; i++) {
            series.add({ y: Math.floor(Math.random() * 20) - 10, x: i })
        }

        return series;
    }

    useEffect(() => {
        if (chartRef.current) {
            dashboard.current = initializeDashboard(chartRef.current);

            scallingChart2.current = initializeScallingChart(dashboard.current);

            scallingChart2Serie.current = renderScalingChart(scallingChart2.current);
        }
        
        return () => {
            if (dashboard.current) {
                dashboard.current.dispose();
            }
        }
    }, []);


    return (
        <div className='chart-test' ref={chartRef} ></div>
    );
}

export default ChartTest;

尝试过的修改：

• 互换x和y数据：

for (let i=0; i<100; i++) {
    series.add({ x: Math.floor(Math.random() * 20) - 10, y: i })
}

但结果不符合预期，因为未指定LightningChart沿Y轴绘制区域。

• 尝试在创建AreaSeries时交换x轴和y轴，无效果：

const series = chart
    .addAreaSeries({
        type: AreaSeriesTypes.Bipolar,
        yAxis: chart.addAxisX(),
        xAxis: chart.addAxisY()
    })

• 查看了createChartXY的配置选项，defaultAxisY仅能设置轴位置，无法实现轴交换。

解决方案 #

LightningChart的AreaSeries默认沿X轴绘制，要实现垂直显示，核心是让系列以Y轴作为"进度轴"，以下两种方法均可实现：

方法1：启用垂直滚动模式

在创建ChartXY时配置verticalScrollMode: true，图表会自动将Y轴作为主坐标轴，AreaSeries会沿Y轴方向展开：

const initializeScallingChart = (dashboard: Dashboard) => {
    const chart = dashboard.createChartXY({
        columnIndex: 0,
        rowIndex: 0,
        verticalScrollMode: true // 启用垂直滚动模式
    })
    .setTitleFillStyle(emptyFill)
    .setTitleMargin({ top: 0, bottom: 0 })
    .setPadding(0)

    return chart;
}

数据部分保持x为随机值、y为递增索引即可，无需额外修改。

方法2：手动指定系列的主轴为Y轴

如果需要更灵活的轴配置，可以手动指定AreaSeries使用Y轴作为主轴：

const renderScalingChart = (chart: ChartXY) => {
    const yAxis = chart.getDefaultAxisY()
    const xAxis = chart.getDefaultAxisX()

    const series = chart.addAreaSeries({
        type: AreaSeriesTypes.Bipolar,
        axis: yAxis,       // 将Y轴设为主轴（数据沿Y轴推进）
        oppositeAxis: xAxis // X轴作为值范围轴
    })

    for (let i=0; i<100; i++) {
        series.add({ x: Math.floor(Math.random() * 20) - 10, y: i })
    }

    return series;
}

这种方式下，AreaSeries会沿着Y轴方向绘制，实现垂直显示的效果。

内容的提问来源于stack exchange，提问作者Kvasir