Добавить текст над кнопкой экспорта в Highcharts

Question

В настоящее время я использую API Highcharts 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/