如何在组条形图中隐藏一个特定组的条形图



使用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将是另一种选择。

相关内容

  • 没有找到相关文章

最新更新