时间戳

首页 > 解决方案 > 如何在组条形图中隐藏一个特定组的条形？

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

问题描述

使用 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'])

标签： javascriptchartsbar-chartlightningchart

解决方案

LegendBox 确实有一个“组”的内部概念，但它只提供按组“标签”对条目进行分组，以及显示组“标签”。组标签不可交互，所以我不认为它可用于这种目的。

根据此类应用程序的流行程度，满足此需求的一些附加功能可能是合理的。

同时，使用 UILayoutBuilders 完全自制的 LegendBox 将是另一种选择。

推荐阅读