在运行时在Highcharts的图表中添加按钮 [英] Add buttons in chart of Highcharts at runtime

问题描述

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

lockquote
$（'container'）。highcharts（）

这可能吗？

解决方案

使用导出对象的按钮：

 导出：{
按钮：{
 customButton：{
文本：'自定义按钮'，
 onclick：function（）{
 alert（'您按下按钮！'）; 
} 
}，
 anotherButton：{
 text：'Another Button'，
 onclick：function（）{
 alert（'You pressed another button ！'）; 
} 
} 
} 
} 
  

< a href =http://jsfiddle.net/NxK39/1/ =nofollow noreferrer> 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）。新增（）; 
  

new fiddle： http://jsfiddle.net/NxK39/2/
使用 Highcharts：替换自定义按钮图像

I need to add some custom buttons (with onclick events), without overwrite the exporting buttons value, 'cause I wanna include new buttons without lost the custom buttons previously defined in chart (my chart already has custom buttons defined), all this at runtime, in a Highcharts chart using this object:

$('container').highcharts()

Is this possible?

解决方案

You can add custom buttons using the exporting object:

    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/

EDIT: He wanted to add buttons after config

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

new fiddle: http://jsfiddle.net/NxK39/2/ answer using technique from Highcharts: replace custom button image on hover

这篇关于在运行时在Highcharts的图表中添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！