LightningChartJS中如何自定义ButtonBox的setPictureOff/On图标？

数据老陈

2026-7-23

自定义LightningChartJS ButtonBox图标方法

完全可以为ButtonBox创建并添加自定义图片，setPictureOff和setPictureOn方法支持传入SVG字符串或Image对象作为自定义图标，以下是具体实现方式：

1. 使用SVG字符串（推荐，矢量图不失真）

直接编写SVG代码作为图标参数，适合自定义简单图标（如箭头、符号等）：

// 自定义向上箭头SVG
const upArrowOff = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 5L12 19M12 5L17 10M12 5L7 10" stroke="#555" stroke-width="2" stroke-linecap="round"/>
</svg>
`;

// 自定义向下箭头SVG（点击后状态）
const downArrowOn = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 19L12 5M12 19L17 14M12 19L7 14" stroke="#222" stroke-width="2" stroke-linecap="round"/>
</svg>
`;

const container = chart.addUIElement(UILayoutBuilders.Row);

container
  .addElement(UIElementBuilders.ButtonBox
    .setPictureOff(upArrowOff)
    .setPictureOn(downArrowOn)
  )
  .setText("")

2. 使用Image对象（适合已有图片文件）

如果已有本地或网络图片资源，可创建Image对象传入：

// 初始化图标图片对象
const offIcon = new Image();
offIcon.src = './assets/arrow-up.png';
const onIcon = new Image();
onIcon.src = './assets/arrow-down.png';

// 确保图片加载完成后再渲染按钮
Promise.all([
  new Promise(resolve => offIcon.onload = resolve),
  new Promise(resolve => onIcon.onload = resolve)
]).then(() => {
  const container = chart.addUIElement(UILayoutBuilders.Row);

  container
    .addElement(UIElementBuilders.ButtonBox
      .setPictureOff(offIcon)
      .setPictureOn(onIcon)
    )
    .setText("")
});