如何使用LightningChart JS绘制指定数据的柱状图并共享X轴

实现步骤与代码示例 #

1. 页面容器准备

先在HTML中定义两个图表容器（一个承载柱状图，一个放置需要共享X轴的其他图表）：

<div id="column-chart-container" style="width: 800px; height: 400px; margin-bottom: 20px;"></div>
<div id="shared-axis-chart-container" style="width: 800px; height: 400px;"></div>

2. 核心JS代码实现

// 假设已通过CDN引入LightningChart JS（全局变量lcjs可用）
const { lightningChart, AxisTickStrategies } = lcjs;

// 创建主图表（承载柱状图）
const mainChart = lightningChart().ChartXY({
    container: 'column-chart-container'
});

// 配置共享X轴 - 后续其他图表将复用此轴实例
const sharedXAxis = mainChart.getDefaultAxisX()
    .setTickStrategy(AxisTickStrategies.Numeric)
    .setTitle('X轴')
    .setInterval({ start: -0.5, end: 3.5 }); // 适配柱子显示范围，避免边缘截断

// 配置柱状图的Y轴
mainChart.getDefaultAxisY()
    .setTitle('柱状图高度')
    .setInterval({ start: 0, end: 12 });

// 创建柱状图系列并添加数据
const columnSeries = mainChart.addColumnSeries()
    .setName('XY柱状图')
    .setColumnWidth(0.8); // 调整柱子宽度，优化视觉效果

// 按需求设置数据：X=0→Y=10，X=1→Y=5，X=2→Y=8，X=3→Y=3
columnSeries.add([
    { x: 0, y: 10 },
    { x: 1, y: 5 },
    { x: 2, y: 8 },
    { x: 3, y: 3 }
]);

// 创建共享X轴的第二个图表（示例为折线图）
const secondaryChart = lightningChart().ChartXY({
    container: 'shared-axis-chart-container'
});

// 绑定共享X轴 - 实现轴同步的关键步骤
secondaryChart.setDefaultAxisX(sharedXAxis);

// 配置第二个图表的Y轴
secondaryChart.getDefaultAxisY()
    .setTitle('辅助图表数值')
    .setInterval({ start: 0, end: 8 });

// 添加辅助图表数据（X轴与柱状图完全对齐）
const lineSeries = secondaryChart.addLineSeries()
    .setName('共享X轴折线图');

lineSeries.add([
    { x: 0, y: 6 },
    { x: 1, y: 2 },
    { x: 2, y: 5 },
    { x: 3, y: 1 }
]);

关键细节说明

• 轴共享机制：通过secondaryChart.setDefaultAxisX(sharedXAxis)将第二个图表的X轴替换为主图表的X轴实例，实现两个图表X轴的同步缩放、平移和刻度一致性。
• 柱状图定制：使用setColumnWidth()调整柱子宽度，setInterval()手动设置轴的显示范围，避免柱子边缘被截断。
• 数据格式：柱状图系列接受{x: number, y: number}格式的数据点，每个点对应一个柱子，柱子中心位于X值位置。

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