使用highchart将柱形图隐藏在柱形图中后，如何填充空间？

slesh 发表于 Dev

斯莱什

通过单击图例项隐藏一列后，是否可以填充空间？

<div id="container" style="height: 300px"></div>
<script src="http://code.highcharts.com/highcharts.src.js"></script>

    var chart = new Highcharts.Chart({

    chart: {
        type: 'column',
        renderTo: 'container'
    },

    "title":{  
      "text":"TITLE",
      "align":"left"
   },
   "subtitle":{  
      "text":"Subtitle Text",
      "align":"left",
      "style":{  
         "paddingBottom":"20px"
      }
   },
   "xAxis":{  
      "categories":[  
         "Category1",
         "Category2",
         "Category3",
         "Category4",
         "Category5"
      ],
      "crosshair":true,
      "title":{  

      },
      "labels":{  
         "enabled":false,
         "format":"{value}"
      }
   },
   "yAxis":{  
      "min":0,
      "title":{  
         "text":"Meters"
      },
      "labels":{  
         "format":"{value}"
      }
   },
   "tooltip":{  
      "enabled":true,
      "headerFormat":"<span style=\"font-size:10px\">{point.key}</span><br/>",
      "shared":true,
      "useHTML":true
   },
   "legend":{  
      "enabled":true,
      "align":"left",
      "useHTML":true
   },
   "plotOptions":{  
      "column":{  
         "pointPadding":0.2,
         "borderWidth":0,
         "dataLabels":{  
            "enabled":true,
            "format":"{point.y:.2f} ",
            "style":{  
               "textShadow":0
            }
         }
      },
      "series":{  
         "grouping":false
      }
   },
    "series":[  
      {  
         "name":"Category1",
         "data":[  
            {  
               "name":"Category1",
               "y":45,
               "x":0
            }
         ]
      },
      {  
         "name":"Category2",
         "data":[  
            {  
               "name":"Category2",
               "y":43,
               "x":1
            }
         ]
      },
      {  
         "name":"Category3",
         "data":[  
            {  
               "name":"Category3",
               "y":43,
               "x":2
            }
         ]
      },
      {  
         "name":"Category4",
         "data":[  
            {  
               "name":"Category4",
               "y":42,
               "x":3
            }
         ]
      },
      {  
         "name":"Category5",
         "data":[  
            {  
               "name":"Category5",
               "y":42,
               "x":4
            }
         ]
      },
      {  
         "name":"",
         "data":[  
            {  

            }
         ],
         "visible":false,
         "showInLegend":false,
         "exporting":false
      },
      {  
         "name":"Bla bla bla",
         "data":[  
            45,
            43,
            43,
            42,
            42
         ],
         "showInLegend":false,
         "visible":false,
         "exporting":true
      }
   ],
   "exporting":{  
      "enabled":false,
      "chartOptions":{  
         "legend":{  
            "enabled":true,
            "maxHeight":null,
            "itemStyle":{  
               "fontFamily":"Arial"
            }
         }
      }
   },
   "loading":{  
      "style":{  
         "opacity":0.9
      }
   },
   "drilldown":{  
      "drillUpButton":{  
         "theme":{  
            "style":{  
               "display":"none"
            }
         }
      }
   }
});

这是现场示例。

当我单击第一个或最后一个图例项目时，图表将重新绘制，但是当我单击中间的图例项目时它不会发生吗？这是错误还是功能？以及如何更改中间图例项目的这种行为，使其也可以引发事件以重绘图表？

谢谢前进

凯珀·玛德杰（Kacper Madej）

您可以设置和更新xAxis的中断以隐藏空白区域：

http://jsfiddle.net/a4vcye4p/1/

  events: {
    legendItemClick: function() {
      var series = this,
        seriesIndex = series._i,
        xAxis = series.xAxis,
        newBreaks = [];
      if (series.visible) {
        newBreaks = xAxis.options.breaks;
        newBreaks.push({
          from: seriesIndex,
          to: seriesIndex + 1,
          seriesIndex: seriesIndex
        });
      } else {
        Highcharts.each(xAxis.options.breaks, function(br) {
          if (br.seriesIndex !== seriesIndex) {
            newBreaks.push(br);
          }
        });
      }
      xAxis.update({
        breaks: newBreaks
      });
    }
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。