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

Question

目前，我正在使用Highcharts API here和here来设置Highcharts的导出按钮的样式。我试图在导出按钮内部放置省略号以创建符合某些样式指南的按钮，但由于API选项的限制，我能得到的最接近的是将它放在符号旁边。

当前使用的选项：

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

这是当前的结果：JsFiddle

最终，我希望最终结果是这样的：

有没有人知道如何在不使用图像的情况下实现这一目标？

Answer 1

使用Renderer，您可以渲染正确的形状并将其添加到导出按钮组。

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

然后指定导出宽度，高度，您可以将符号设置为空

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

示例：http://jsfiddle.net/0wd08pjw/