Lightning Chart Volume profile图：折线与水平柱状图能否共享轴？

问题描述 #

在Lightning Chart的Volume profile chart场景下，是否可以在包含折线系列（Line Series）的同一坐标轴上显示水平柱状图？或者是否存在折线图与柱状图共享坐标轴的配置选项？目前使用如下代码创建的BarChart似乎属于XYChart，与需求不符：

const barChart = lc
    .BarChart({
        type: BarChartTypes.Horizontal,
        theme: Themes.cyberSpace,
    })

解决方案 #

完全可以实现折线系列与水平柱状图在Volume Profile Chart的同一坐标轴上共存，你之前用lc.BarChart()创建的是独立的XY类型柱状图，确实和Volume Profile场景不匹配。正确的做法是直接在Volume Profile Chart实例上添加水平柱状系列，而非新建独立的BarChart。

具体实现步骤 #

1. 创建Volume Profile Chart实例

const volumeProfileChart = lc.VolumeProfileChart({
    theme: Themes.cyberSpace,
    // 按需添加其他Volume Profile专属配置
})

2. 添加水平柱状系列到目标坐标轴
   直接在已创建的Volume Profile Chart上添加水平柱状系列，默认会关联到图表的主轴：

// 创建并配置水平柱状系列
const horizontalBarSeries = volumeProfileChart.addHorizontalBarSeries({
    // 可自定义柱状图填充色、边框样式等
    fillStyle: new SolidFill({ color: ColorHEX('#2ECC71') }),
    strokeStyle: new SolidLine({ thickness: 1, color: ColorHEX('#27AE60') })
})
// 设置柱状图数据
horizontalBarSeries.setData([
    { category: '区间1', value: 150 },
    { category: '区间2', value: 280 },
    { category: '区间3', value: 190 }
])

3. 添加折线系列到同一坐标轴
   同样在该Volume Profile Chart实例上添加折线系列，默认会共享同一套坐标轴：

// 创建并配置折线系列
const lineSeries = volumeProfileChart.addLineSeries({
    strokeStyle: new SolidLine({ thickness: 2, color: ColorHEX('#E74C3C') }),
    pointMarker: new PointMarker({ size: 5, fillStyle: new SolidFill({ color: ColorHEX('#E74C3C') }) })
})
// 设置折线数据（注意与柱状图的类别/位置对应）
lineSeries.setData([
    { x: 0, y: 150 },
    { x: 1, y: 280 },
    { x: 2, y: 190 }
])

4. 手动绑定共享坐标轴（可选）
   如果需要更精细的坐标轴控制，可手动获取轴实例并将多个系列绑定到同一轴：

const sharedYAxis = volumeProfileChart.getDefaultAxisY()
// 将两个系列都绑定到同一Y轴
horizontalBarSeries.setAxisY(sharedYAxis)
lineSeries.setAxisY(sharedYAxis)

关键说明 #

• Volume Profile Chart本身支持在同一坐标轴容器中挂载多种系列类型，包括折线、水平柱状等，无需单独创建独立的XYBarChart。
• 数据点的坐标需要对应匹配，确保折线和柱状图在同一坐标轴上的位置对齐。

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