Lightningchart js ButtonBox边框颜色

问题描述

需要帮助为ButtonBox边框上色（黄线）。

this.chart
      .addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))
      .setPosition({ x: 18,y: 99 })
      .setorigin(UIOrigins.RightTop)
      .setText("Download PNG Image")
      .setPadding({ top: 5,right: 20,bottom: 5,left: 20 })
      .setButtonOffSize(0)
      .setButtonOnSize(0)
      .setDraggingMode(UIDraggingModes.notDraggable)
      .onMouseClick((event) => {
        this.chart.savetoFile(this.chart.getTitle())
      })
  }

图表截图：

解决方法

可以通过编辑UI元素的背景笔触样式来编辑ButtonBox的颜色。

const uiElement = chart.addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))

uiElement.setBackground(bg => bg
        .setStrokeStyle((lineStyle) => lineStyle
            .setFillStyle(fillStyle => fillStyle
                .setColor(ColorHEX('#f00'))
            )
        )
    )

// Extract required parts from LightningChartJS.
const {
    lightningChart,UIBackgrounds,UIOrigins,UIElementBuilders,UIDraggingModes,ColorHEX
} = lcjs

// Create a XY Chart.
const chart = lightningChart().ChartXY()

chart.addUIElement(UIElementBuilders.ButtonBox.setBackground(UIBackgrounds.Rectangle))
    .setPosition({ x: 99,y: 99 })
    .setOrigin(UIOrigins.RightTop)
    .setText('Download PNG Image')
    .setPadding({ top: 5,right: 20,bottom: 5,left: 20 })
    .setButtonOffSize(0)
    .setButtonOnSize(0)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setBackground(bg => bg
        .setStrokeStyle((lineStyle) => lineStyle.setFillStyle(fillStyle => fillStyle.setColor(ColorHEX('#f00'))))
    )
    .onMouseClick((event) => {
        chart.saveToFile(chartTitle + ' - Screenshot')
    })

<script src="https://unpkg.com/@arction/lcjs@2.0.3/dist/lcjs.iife.js"></script>

charts lightningchart