highcharts：调整导出下拉菜单的大小答案

【问题标题】：highcharts: resize exporting dropdownhighcharts：调整导出下拉菜单的大小
【发布时间】：2018-02-05 13:15:27
【问题描述】：

我正在制作一个高度非常低的高图，可能在 150 像素左右。在这种情况下，导出下拉菜单会被剪掉。 Fiddle: Export drop-down clipped off。有没有办法我们可以调整较小图表的下拉菜单的大小

 exporting: {    enabled: true  }.

这是我的导出对象中唯一的内容。任何帮助将不胜感激。

【问题讨论】：

标签： javascript highcharts export

【解决方案1】：

您是否尝试过exporting.buttons.contextButton.height，例如：

  exporting: {
    enabled: true,
    buttons: {
        contextButton: {
            height: 20,
            width: 20,
            symbolSize: 12,
            symbolX: 10,
            symbolY: 10,
            symbolStrokeWidth: 1
      }
    }
  },

或

exporting: {
    buttons: {
        contextButton: {
            symbol: 'download',
            symbolSize: 10,
        }
    }
}

使用适当的尺寸、宽度、高度值。

【讨论】：

【解决方案2】：

我设法通过

压缩了导出按钮的选项

1> 通过 css 移除填充

.highcharts-menu-item{
  padding:0px 2px 0px 2px !important
}

2>通过删除<hr>标签作为选项之一

var theExportOptions = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
theExportOptions.splice(0, 2);

3> 可选缩小按钮尺寸

navigation: {
    buttonOptions: {
        height: 20,
        width: 24,
        symbolSize: 12,
        symbolX: 10,
        symbolY: 10,
        symbolStrokeWidth: 2
    }
}

var theExportOptions = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
theExportOptions.splice(0, 2);
Highcharts.chart('container', {
  title: {
    text: 'Exporting dropdown clipped for smaller charts'
  },
  credits: {
    enabled: false
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }],

  exporting: {
    enabled: true,

  },
  navigation: {
    buttonOptions: {
      height: 20,
      width: 24,
      symbolSize: 12,
      symbolX: 10,
      symbolY: 10,
      symbolStrokeWidth: 2
    }
  }

});

.highcharts-menu-item {
  padding: 0px 2px 0px 2px !important
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="width: 500px; height: 150px; margin: 0 auto"></div>

Fiddle演示

【讨论】：

【解决方案3】：

您可以通过简单的 CSS 显示此元素：

#container> .highcharts-container {
  overflow: visible!important;
}

演示：https://jsfiddle.net/BlackLabel/e7u1jdrx/26/

【讨论】：