闪电图UI组件宽度和高度

Question

我已遵循此说明：

https://lightningchart.com/js-charts/docs/features/ui/

得到了这个盒子，我不需要在里面放文本，所以我只放一个空字符串''

可以控制TextBox的宽度和高度吗？

例如使 TextBox 高度从 20.0 至 16.0 ?

例如，如果我想将 TextBox 尺寸指定为矩形，每个点要位于什么位置？

imports

export const CreateLeadChart = (
  dashboard: Dashboard,
  maxYChartBorder: number
) => {
  const BackgroundFill = new SolidFill({
    color: ColorHEX("#ffffff"),
  });

  const LeadChart = dashboard
    .createChartXY({
      columnIndex: 2,
      rowIndex: 0,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill);


  const blacklineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
    (stroke) =>
      new SolidLine({
        thickness: 7,
        fillStyle: new SolidFill({ color: ColorHEX("#212121") }),
      })
  );

  const tipLineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
    (stroke) =>
      new SolidLine({
        thickness: 2,
        fillStyle: new SolidFill({ color: ColorHEX("#BDBDBD") }),
      })
  );

  const dataGray = [
    { x: 2.0, y: 10.52, z: 1 },
    { x: 2.0, y: maxYChartBorder, z: 12 },
  ];


  const dataTip = [
    { x: 2.0, y: 9.52, z: 1 },
    { x: 2.0, y: 8.52, z: 1 },
  ];

  graylineSeries.add(dataGray);
  blacklineSeries.add(dataBlack);
  tipLineSeries.add(dataTip);

  // display blue and red boxes https://lightningchart.com/js-charts/docs/features/ui/
  const axisX = LeadChart.getDefaultAxisX();
  const axisY = LeadChart.getDefaultAxisY();
  const textBox = LeadChart.addUIElement(UIElementBuilders.TextBox, {
    x: axisX,
    y: axisY,
  })
    .setPosition({ x: 2.2, y: 20 })
    .setOrigin(UIOrigins.LeftTop)
    .setVisible(true)
    .setText("      ");

  textBox.setMouseInteractions(false); // preventing from user to drag

  textBox.setBackground((background) =>
    background.setFillStyle(new SolidFill({ color: ColorHEX("#039BE5") }))
  );

  return LeadChart;
};

Answer 1

https://lightningchart.com/js-charts/docs/features/xy/figures/

const rectangleSeries = chart.addRectangleSeries()
const rectangleFigure = rectangleSeries
    .add({ x1: 0, y1: 0, x2: 10, y2: 10 })
    // Optional, changing default style
    .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))

[![enter image description here][1]][1]