如何在LightningChartJS中实现垂直文本显示？

要实现垂直文本显示，你可以利用LightningChart JS的setTextRotation方法为TextBox元素设置旋转角度，通常设置为90°（文本向上垂直）或270°（文本向下垂直）即可。

以下是修改后的完整代码：

import "./styles.css";
import { useEffect } from "react";
import { lightningChart, UIElementBuilders, UIOrigins } from "@arction/lcjs";

export default function App() {
  useEffect(() => {
    const lc = lightningChart();
    const chart = lc.ChartXY({ container: "chart" });
    const axisX = chart.getDefaultAxisX();
    const axisY = chart.getDefaultAxisY();
    
    const textBox = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
      .setPosition({ x: 5, y: 5 })
      .setText("Hello, World!")
      .setOrigin(UIOrigins.LeftBottom)
      .setTextRotation(90); // 设置文本旋转90度，实现垂直显示

    // 组件卸载时销毁图表，避免内存泄漏
    return () => {
      chart.dispose();
    };
  }, []);

  return (
    <div style={{ width: "500px", height: "500px" }} className="chart" id="chart">
    </div>
  );
}

关键说明： #

• setTextRotation(90)：将文本顺时针旋转90°，此时文本会垂直向上显示；如果需要文本向下垂直显示，可改为setTextRotation(270)。
• 旋转后如果文本位置不符合预期，可以调整setOrigin的参数（比如UIOrigins.BottomLeft），配合setPosition来校准文本的显示位置。
• 额外添加了组件卸载时的chart.dispose()调用，避免React组件重复渲染导致的内存泄漏问题。

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