Lightningchart js ButtonBox边框颜色

Question

需要帮助为 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())
      })
  }

图表截图：

Answer 1

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

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>

Lightningchart js ButtonBox边框颜色

Lightningchart js ButtonBox border color

charts

lightningchart