在运行时在Highcharts的图表中添加按钮

Question

我需要添加一些自定义按钮(带有onclick事件),而不会覆盖导出按钮值,因为我想包含新按钮而不会丢失先前在图表中定义的自定义按钮(我的图表已经定义了自定义按钮),所有这些都在运行时,在使用此对象的Highcharts图表中:

$( '容器').highcharts()

这可能吗？

Answer 1

您可以使用导出对象添加自定义按钮:

    exporting: {
        buttons: {
            customButton: {
                text: 'Custom Button',
                onclick: function () {
                    alert('You pressed the button!');
                }
            },
           anotherButton: {
                text: 'Another Button',
                onclick: function () {
                    alert('You pressed another button!');
                }
            }
        }
    }

http://jsfiddle.net/NxK39/1/

编辑:他想在配置后添加按钮

    var chart = $('#container').highcharts();
    normalState = new Object();
    normalState.stroke_width = null;
    normalState.stroke = null;
    normalState.fill = null;
    normalState.padding = null;
    normalState.r = null;

    hoverState = new Object();
    hoverState = normalState;
    hoverState.fill = 'red';

    pressedState = new Object();
    pressedState = normalState;

    var custombutton = chart.renderer.button('button', 74, 10, function(){
        alert('New Button Pressed');
    },null,hoverState,pressedState).add();

新的小提琴:http://jsfiddle.net/NxK39/2/ 使用Highcharts的技术回答:在悬停时替换自定义按钮图像

Answer 2

这似乎更干净(由于能够正确对齐):

JS

chart.renderer.button('Reset zoom', null, null, chart.resetZoom, {
   zIndex: 20
}).attr({
   align: 'right',
   title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
   align: 'right',
   x: -10,
   y: 10
}, false, null);

最初在这里找到:http://forum.highcharts.com/viewtopic.php？f = 9&t = 15416

如果您需要传递任何信息,请执行以下操作:

chart.renderer.button('Reset zoom', null, null, function(){ myFunction(chart) }, {
   zIndex: 20
}).attr({
   align: 'right',
   title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
   align: 'right',
   x: -10,
   y: 10
}, false, null);