Question

如果从正面关闭图例，图表会正常消失。

但是，如果从中间关闭图例，图表将不会消失。

如何让它消失？

这是我的chartOptions

// Create the chart
Highcharts.chart('container',
        {
    chart: { type: 'column' },
    title: { text: null },
    xAxis: { type: 'category', labels: { rotation: -45 }},
    yAxis: { title: { text: null }},
    legend: { enabled: true },
    credits: { enabled: false },
    plotOptions: { series: { grouping: false, pointWidth: 15}},
    "series": [
        {
            "name": "Chrome",
            "color": "red",
            "data": [
                {
                    "name": "Chrome",
                    "y": 62.74
                }
            ]
        },
         {
            "name": "Safari",
            "color": "blue",
            "data": [
                {
                    "name": "Safari",
                    "y": 50
                }
            ]
        },
         {
            "name": "abc",
            "color": "orange",
            "data": [
                {
                    "name": "abc",
                    "y": 120
                }
            ]
        },
         {
            "name": "abc1",
            "color": "purple",
            "data": [
                {
                    "name": "abc1",
                    "y": 120
                }
            ]
        },
         {
            "name": "abc2",
            "color": "brow",
            "data": [
                {
                    "name": "abc2",
                    "y": 120
                }
            ]
        }
    ]
});

Answer 1

Highcharts只会隐藏极端之外的点，而不是中间点。 Highcharts github#7691有相关的增强功能。

您可以使用我的解决方法（基于断轴模块）添加此功能：

重要提示：它只是一个PoC，有些部分并不完美（例如必须定义categories）。随意更改/修复代码并告知我们。

1）包括broken-axis模块：

<script src="https://code.highcharts.com/modules/broken-axis.js"></script>

2）添加插件：

(function(H) {
  var each = H.each,
    pick = H.pick,
    defined = H.defined;


  H.Series.prototype.pointClass.prototype.setVisible = H.seriesTypes.pie.prototype.pointClass.prototype.setVisible;

  H.Category = function(axis, name, index) {
    this.axis = axis;
    this.chart = axis.chart;
    this.index = index;
    this.name = name;
    this.visible = true;
    this.color = axis.chart.options.colors[index];
    this.hiddenColor = '#dedede';
  };

  H.extend(H.Category.prototype, {
    options: {
      className: 'highcharts-legend-category'
    },
    drawLegendSymbol: H.LegendSymbolMixin.drawRectangle,
    setVisible: function(visible, redraw, animation) {
      var category = this,
        breaks = category.axis.options.breaks || [];

      redraw = pick(redraw, true);

      this.visible = pick(visible, !category.visible);

      if (category.visible) {
        breaks = H.grep(breaks, function(brk) {
          return (brk.from * 10 + 1) / 10 !== category.index;
        });
      } else {
        breaks.push({
          from: (category.index * 10 - 1) / 10,
          to: category.index + 1
        });
      }

      category.axis.update({
        breaks: breaks
      }, false);

      if (redraw) {
        this.chart.redraw(animation);
      }
    },
    setState: function(state) {
      var index = this.axis.tickPositions.indexOf(this.index);

      if (index === -1) {
        return;
      }
      each(this.axis.series, function(series) {
        if (series.points[index]) {
          series.points[index].setState(state);
        }
      }, this);
    }
  });

  H.wrap(H.Legend.prototype, 'getAllItems', function(p) {


    var allItems = [],
      categoryAxes = [];
    each(this.chart.series, function(series) {
      var seriesOptions = series && series.options;

      // Handle showInLegend. If the series is linked to another series,
      // defaults to false.
      if (series && pick(
          seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? undefined : false, true
        )) {

        // Use points or series for the legend item depending on
        // legendType

        if (seriesOptions.legendType === 'category') {
          if (series.xAxis.categories && categoryAxes.indexOf(series.xAxis) === -1) {
            categoryAxes.push(series.xAxis);
          }
        } else {
          allItems = allItems.concat(
            series.legendItems ||
            (
              seriesOptions.legendType === 'point' ?
              series.data :
              series
            )
          );
        }
      }
    });

    if (categoryAxes.length) {
      each(categoryAxes, function(axis) {
        allItems = allItems
          .concat(
            axis.categories.map(
              function(cat, i) {
                return new H.Category(axis, cat, i);
              }
            )
          );
      });
    }

    return allItems;

  });
})(Highcharts);

3）在plotOptions中设置legendType：

plotOptions: { series: { legendType: 'category', ... } }

4）定义类别：

xAxis: { categories: [ ... ] }

结果：

如何隐藏highchart列类型中的列

1 个答案: