高圖：調整出口大小下拉菜單

Question

我正在處理圖表高度不高的highcharts圖，可能在150px左右。 在這種情況下，導出下拉列表將被剪切掉。 小提琴：導出下拉列表被剪掉 。 有沒有辦法為較小的圖表調整下拉菜單的大小

 exporting: {    enabled: true  }. 

這是我導出對象中唯一的內容。 任何幫助，將不勝感激。

Answer 1

您是否嘗試過export.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,
        }
    }
}

使用適當的大小，寬度，高度值。

Answer 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> 

小提琴演示

Answer 3

您可以通過簡單的CSS顯示此元素：

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

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