how to hide column in highchart column type

问题:

Here's jsfiddle link!

all display chart image link

If you turn off legend from the front, the chart disappears normally.

chart disappers normally image link

However, if you turn off the legend from the middle, the chart will not disappear.

chart dont disappear image link

How can I make it disappear?

here is my 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
                }
            ]
        }
    ]
});

回答1:

Highcharts will hide only points that are outside the extremes, never middle ones. There is related enhancement on the Highcharts github#7691.

You can use my workaround (based on broken-axis module) to add this functionality:

Important: It's just a PoC, some parts are not perfect (e.g. categories must be defined). Feel free to change/fix code and let me know.

1) Include broken-axis module:

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

2) Add plugin:

(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) Set legendType in plotOptions:

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

4) Define categories:

xAxis: { categories: [ ... ] }

Results:

• http://jsfiddle.net/BlackLabel/6oz3g4vd/1/
• http://jsfiddle.net/BlackLabel/y25tug48/9/