Highchart - Boxplot - 显示没有数据的额外类别

Question

当我像这样用 Highchart 绘制 BOX Plot 图表时：JSFiddle

chart: {
        type: 'boxplot',

    }

其中类别 2 "Merchant 2" 显示在 x 轴上，即使我们没有它的数据。

当箱形图中没有数据时，我们如何避免在 x 轴上呈现类别？

谢谢

Answer 1

Highcharts 中没有内置机制可以过滤和隐藏 "unused" 个类别。

解决方法：

breaks 功能允许隐藏轴上的区域。这是一个算法，它可以找到上面没有任何点的类别并应用中断：

    render: function() {
      if (redrawEnabled) {
        redrawEnabled = false;

        var emptyCategories = [],
          series = this.series,
          xAxis = this.xAxis[0],
          categories = xAxis.categories.slice(),
          categoryFlags = new Array(categories.length).fill(false), // indicates if any point has a value for category with the given index
          breaks = [],
          correspondingPoint;


        // find out which categories are 'used'
        for (var i = 0; i < categories.length; i++) {

          for (var ii = 0; ii < series.length; ii++) {
            if (!series[ii].visible) {
              continue;
            }

            correspondingPoint = series[ii].data.find((point) => point.x === i);
            if (correspondingPoint) {
              categoryFlags[i] = true;
              break;
            }
          }
        }

        // create and apply breaks
        categoryFlags.forEach(function(flag, index) {
          if (!flag) {
            breaks.push({
              from: index - 0.5,
              to: index + 0.5
            });
          }
        });

        //console.log(breaks)
        xAxis.update({
          breaks: breaks
        });
      }
      redrawEnabled = true;
    }

现场演示： http://jsfiddle.net/BlackLabel/fubwdm4x/

理解这个解决方案如何工作的关键是类别基本上只是关于如何格式化轴标签和位置刻度的信息。 tickInterval 始终为 1，刻度向左移动 -0.5。因此，如果您有这样的类别：['Category 1', 'Category 2', 'Category 3'] 刻度的位置为：-0.5、0.5、1.5 和 2.5。

API参考：https://api.highcharts.com/highcharts/yAxis.breaks

Highchart - Boxplot - 显示没有数据的额外类别

Highchart - Boxplot - Extra category shown with no data

highcharts

boxplot

angular2-highcharts