闪电图条形图类型水平，轴位于底部

Question

我正在使用lightningChartJS

带有热图和水平条形图

如下图所示

如何使（图中的 1）x 轴位于底部（2）的位置，以便与（3）对齐

这是我用来初始化图表的代码

const createRMSGraph = (divRef: string) => {

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

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

  chart.setData(data);
};

const createPSDGraph = (divRef: string) => {
  //init
  const theme = Themes.light;
  const BackgroundFill = new SolidFill({
    color: ColorHEX('#ffffff'),
  });
  const chart = lc
    .ChartXY({
      container: divRef,
      theme: theme,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');

  // add heatmap on top of 
  chart.addHeatmapGridSeries({
    columns: 1000,
    rows: 1000,
  });  
};

export { createPSDGraph };

Answer 1

点击此链接

https://lightningchart.com/js-charts/docs/4.2.1/basic-topics/multiple-axes-and-axis-locations/#:~:text=Axes%20can%20also%20be%20positioned% 20at%20the%20对面，%20ChartXY%20is%20created%3A%20const%20chart%20%3D%20lightningChart%28%29.ChartXY%28%7B

通过在初始化时添加此属性，我解决了问题

      defaultAxisY: { opposite: true },

对于

.ChartXY({
      container: divRef,
      theme: theme,
      defaultAxisY: { opposite: true },
    })

功能齐全

const createRMSGraph = (divRef: string) => {
  const theme = Themes.light;
  const BackgroundFill = new SolidFill({
    color: ColorHEX('#ffffff'),
  });
  const chart = lc
    .ChartXY({
      container: divRef,
      theme: theme,
      defaultAxisY: { opposite: true },
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');
  const segmentSeries = chart
    .addSegmentSeries()
    .setDefaultStyle((figure) => figure.setStrokeStyle((stroke) => stroke.setThickness(2)));

  const histogramData = [
    { x: 25.01, y: 195.2317495 },
    { x: 24.01, y: 205.7760001 },
    { x: 23.07, y: 196.348065 },
    { x: 22.1, y: 343.456708 },
    { x: 21.09, y: 343.456708 },
    { x: 20.12, y: 260.5814188 },
  ];
  histogramData.forEach((point) => {
    segmentSeries.add({ startX: point.x, startY: 0, endX: point.x, endY: point.y });
  });
};