使用LightningchartJS,我创建了一个分组条形图。我根据类别创建了系列,并根据国家对其进行了分组。使用图例框,我可以根据条形图的系列隐藏条形图。有没有一种方法可以根据他们的群体来隐藏他们?
const addGroups = (names) => {
for (const name of names)
groups.push({
name,
tick: axisX.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter((_) => name)
.setMarker((marker) => marker
.setBackground((background) => background
.setFillStyle(emptyFill)
.setStrokeStyle(emptyLine)
)
)
})
}
const addCategory = (entry) => {
// Each category has its own series.
const series = createSeriesForCategory(entry)
.setName(entry.name)
.setDefaultStyle(figure => figure.setFillStyle(entry.fill))
entry.figures = entry.data.map((value) => series.add({ x: 0, y: 0, width: 0, height: 0 }))
legendBox.add(series, 'Legend')
categories.push(entry)
redraw()
}
const createSeriesForCategory = (category) => {
const series = chart.addRectangleSeries()
// Change how marker displays its information.
series.setResultTableFormatter((builder, series, figure) => {
// Find cached entry for the figure.
let entry = {
name: category.name,
value: category.data[category.figures.indexOf(figure)]
}
// Parse result table content from values of 'entry'.
return builder
.addRow('Department:', entry.name)
.addRow('# of employees:', String(entry.value))
})
// Apply cursor logic using series.onHover method
series.onHover((_, point) => {
if (point) {
const figure = point.figure
const dimensions = figure.getDimensionsPositionAndSize()
// Show band.
band
.setDimensions({
x: dimensions.x - figureGap * .5,
y: figure.scale.y.getInnerStart(),
width: dimensions.width + figureGap,
height: figure.scale.y.getInnerInterval()
})
.restore()
} else
band.dispose()
})
return series
}
const categories = ['Engineers', 'Sales', 'Marketing']
chart.addGroups(['Finland', 'Germany', 'UK'])
LegendBox确实有一个"组"的内部概念,但它只提供按组"标记"分组条目,以及显示组"标签"。群组标签是不可交互的,所以我认为它不能用于这种目的。
根据这类应用程序的流行程度,满足这种需求的一些附加功能可能是合理的。
同时,使用UILayoutBuilders的完全自制的LegendBox将是另一种选择。