在Highcharts中的导出按钮上添加文本

Question

Currently I am using the Highcharts API here and here to style the export button for Highcharts. I am trying to get an ellipsis positioned inside of the export button to create a button that meets some styling guidelines, but due to the limitations of the API options, the closest I can get is placing it next to the symbol.

Current used options:

exportButton: {
    text: '...',
    symbolFill: 'rgb(250, 168, 0)',
    symbolStroke: 'transparent',
    symbol: 'circle'
},

this is the current result: JsFiddle

Ultimately, I want the end result to be something like this:

Does anyone know a way I can acheive this without using an image?

Answer 1

With the use of Renderer , you can render a proper shape and add it to the exporting button group.

Highcharts.Chart.prototype.callbacks.push(function(chart) {
var exportElements = chart.exportSVGElements,
  exportButton = exportElements[0],
  cx = exportButton.width / 2,
  cy = exportButton.height / 2,
  r = cx,
  renderer = chart.renderer;

    exportElements.push(renderer.circle({
      cx: cx,
      cy: cy,
      r: r,
      fill: '#ADD8E6'
    }).add(exportButton));

    [0.65, 1, 1.35].forEach(scx => {
      exportElements.push(renderer.circle({
        cx: scx * cx,
        cy: cy,
        r: r * 0.12,
        fill: 'white'
      }).add(exportButton));
    });
});

Then specify exporting width, height and you can set symbol to null

    exporting: {
  buttons: {
    contextButton: {
      symbol: null,
      height: 50,
      width: 50,
    }
  }
},

example: http://jsfiddle.net/0wd08pjw/