我有一个饼状图,希望在每个切片上有不同颜色的标签,以便文本更易于阅读。下面是一个稍微修改过的代码,它创建了一个简单的饼状图,里面有标签,取自这里的交互式演示:
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] })
}
processedData.map((item) => donut.addSlice(item.name, item.value))
donut.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
donut.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
.setAutoDispose({
type: 'max-width',
maxWidth: 0.80,
})
.add(donut)
是否有任何方法可以修改每个切片标签的填充颜色,类似于setLabelFormatter的工作方式?
如果没有,我有什么选择?我想用addUIElement(UIElementBuilders.TextBox)
创建自定义UI文本框元素,虽然我不知道如何将它们定位在切片上,因为我找不到任何获取切片位置或任何类型测量的方法(此外,我不能直接将其附加到PieSlice
)。
嗯,答案(可能)是否定的。LightningChart JS API没有为这种特殊类型的图表提供任何单独修改图表标签样式的方法。我通过隐藏图表标签和在图表顶部添加自定义文本框来解决这个问题。这还需要实现自定义的定位方法来调整大小和切片值的变化。