如何在LightningChart JS饼图中为各扇区标签设置不同样式

问题概述 #

希望为LightningChart JS饼图的每个扇区标签设置不同颜色以提升可读性，当前使用LabelsInsideSlices模式的内置标签，询问是否可通过类似setLabelFormatter的方式单独修改标签填充色，以及自定义UI文本框的定位方法。

核心解答 #

1. 内置标签能否单独设置颜色？ #

LightningChart JS的内置饼图标签（如LabelsInsideSlices模式）不支持通过全局方法统一设置单个标签颜色，setLabelFormatter仅能控制标签的文本内容格式，无法修改样式属性。

但可以通过单个切片对象的API直接设置对应标签的颜色，这是最简便的方案：

实现代码（修改原代码的切片添加逻辑）

const lcjs = require('@arction/lcjs')

const {
    lightningChart,
    PieChartTypes,
    UIElementBuilders,
    LegendBoxBuilders,
    UIDraggingModes,
    SliceLabelFormatters,
    UIOrigins,
    emptyFill,
    emptyLine,
    Themes
} = lcjs

const donut = lightningChart().Pie({
    theme: Themes.darkGold, 
    type: PieChartTypes.LabelsInsideSlices
})
    .setTitle('Inter Hotels - hotel visitors in June 2016')
    .setPadding({ top: 40 })
    .setAnimationsEnabled(true)
    .setMultipleSliceExplosion(false)

const data = {
    country: ['US', 'Canada', 'Greece', 'UK', 'Finland', 'Denmark'],
    values: [15000, 20030, 8237, 16790, 9842, 4300]
}
const processedData = []

for (let i = 0; i < data.values.length; i++) {
    processedData.push({ name: `${data.country[i]}`, value: data.values[i] })
}

// 定义每个标签的颜色数组
const labelColors = ['#ffffff', '#000000', '#ffff00', '#ff00ff', '#00ffff', '#ff6600']

// 添加切片时单独设置对应标签颜色
processedData.map((item, index) => 
    donut.addSlice(item.name, item.value)
        // 为当前切片的标签设置填充色
        .setTextFillStyle(fillStyle => fillStyle.setColor(labelColors[index]))
)

donut.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
donut.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
    .setAutoDispose({
        type: 'max-width',
        maxWidth: 0.80,
    })
    .add(donut)

2. 自定义UI文本框的方案（复杂场景备选） #

如果需要更高度自定义的标签样式（如字体、背景等），可以使用UIElementBuilders.TextBox创建自定义文本框，通过获取切片的中心位置来定位：

实现代码

const lcjs = require('@arction/lcjs')

const {
    lightningChart,
    PieChartTypes,
    UIElementBuilders,
    LegendBoxBuilders,
    UIDraggingModes,
    SliceLabelFormatters,
    UIOrigins,
    emptyFill,
    emptyLine,
    Themes
} = lcjs

const donut = lightningChart().Pie({
    theme: Themes.darkGold, 
    type: PieChartTypes.LabelsInsideSlices
})
    .setTitle('Inter Hotels - hotel visitors in June 2016')
    .setPadding({ top: 40 })
    .setAnimationsEnabled(true)
    .setMultipleSliceExplosion(false)
    // 隐藏内置标签，使用自定义文本框替代
    .setSliceLabelVisibility(false)

const data = {
    country: ['US', 'Canada', 'Greece', 'UK', 'Finland', 'Denmark'],
    values: [15000, 20030, 8237, 16790, 9842, 4300]
}
const processedData = []

for (let i = 0; i < data.values.length; i++) {
    processedData.push({ name: `${data.country[i]}`, value: data.values[i] })
}

const labelColors = ['#ffffff', '#000000', '#ffff00', '#ff00ff', '#00ffff', '#ff6600']
const clientArea = donut.getClientArea()

processedData.map((item, index) => {
    const slice = donut.addSlice(item.name, item.value)
    // 创建自定义文本框
    const customLabel = donut.addUIElement(UIElementBuilders.TextBox, { origin: UIOrigins.Center })
        .setText(`${item.name}: ${item.value}`)
        .setTextFillStyle(fill => fill.setColor(labelColors[index]))
        // 去掉文本框的背景和边框，模拟内置标签样式
        .setBackground(emptyFill)
        .setBorder(emptyLine)
    
    // 定位文本框到切片中心
    const updateLabelPosition = () => {
        const sliceCenter = slice.getCenterPosition()
        customLabel.setPosition({
            x: clientArea.width * sliceCenter.x,
            y: clientArea.height * sliceCenter.y
        })
    }
    // 初始定位
    updateLabelPosition()
    // 监听切片爆炸状态变化，实时更新位置
    slice.onExplosionChanged(updateLabelPosition)
})

donut.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
    .setAutoDispose({
        type: 'max-width',
        maxWidth: 0.80,
    })
    .add(donut)

注意事项

• 自定义文本框需要手动同步切片位置变化（如爆炸、动画），通过slice.onExplosionChanged事件监听更新。
• 使用slice.getCenterPosition()获取切片的相对中心坐标（范围0-1），再转换为饼图客户端区域的像素坐标定位。

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