如何将Lightning Chart水平条形图X轴移至底部与热力图对齐？

要将水平条形图的X轴移至底部并与热力图的X轴对齐，只需在初始化条形图后，获取其数值X轴并修改轴的位置属性即可。

修改后的水平条形图初始化代码 #

const createRMSGraph = (divRef: string) => {
  const chart = lc
    .BarChart({
      container: divRef,
      theme: theme,
      type: BarChartTypes.Horizontal,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');

  // 获取水平条形图的X数值轴（水平条形图的X轴为数值轴，Y轴为分类轴）
  const xAxis = chart.getDefaultAxisX();
  // 将X轴位置设置为底部
  xAxis.setPosition(AxisPositions.Bottom);

  const data = [
    { category: 'Helsinki', value: 19.1 },
    { category: 'New York', value: 20.6 },
  ];

  chart.setData(data);
};

关键说明 #

• 水平条形图（BarChartTypes.Horizontal）默认布局：Y轴为分类轴（左侧），X轴为数值轴（顶部）。
• 通过chart.getDefaultAxisX()获取X轴实例后，调用setPosition(AxisPositions.Bottom)即可将轴移动到图表底部，与热力图（ChartXY默认底部X轴）对齐。
• 确保已导入AxisPositions枚举（若未自动引入，需手动添加：import { AxisPositions } from '@arction/lcjs'）。

热力图代码无需修改 #

你的热力图初始化代码（createPSDGraph）使用ChartXY，其X轴默认处于底部位置，因此不需要调整。

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