如何在highchart列类型中隐藏列 [英] how to hide column in highchart column type

问题描述

这是 jsfiddle链接！

所有显示图表图像链接

如果从前面关闭图例，则图表会正常消失.

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

图表通常会显示图片链接

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

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

图表不消失图像链接

我如何使其消失?

这是我的chartOptions

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

推荐答案

高图只会隐藏极端之外的点，不会隐藏中间的点. Highcharts上有相关的增强功能 github#7691 .

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:

重要提示:这只是一个PoC，某些部分并不完美(例如，必须定义categories).随时更改/修复代码，并告诉我.

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)包括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:

3) Set legendType in plotOptions:

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

4)定义类别:

xAxis: { categories: [ ... ] }

结果:

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

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

这篇关于如何在highchart列类型中隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！