javascript - highcharts custombutton hover and press 默认情况下更改颜色

Question

我正在尝试在 highcharts 中使用创建自定义按钮具有默认颜色的“chart.renderer.button”。但是在悬停或按下时颜色似乎默认会改变......我不希望颜色在悬停和按下按钮时改变。请让我知道是否有可以完成的简单修复

这是 fiddle : http://jsfiddle.net/NxK39/81/

    *var testbutton = chart.renderer.button('button1',0, 10)
        .attr({
            id: 'button1',
            fill:'#000000',
            height:20,
            width:40
        })
        .on('click', function () {
        alert("test1");

        })
        .css({
            color: '#FFFFFF',
            fontSize: '12px',
            fontWeight: 'bold'
        })
        .add();*

Answer 1

当创建按钮时，构造函数从源代码中获取更多参数:

    /**
     * Create a button with preset states
     * @param {String} text
     * @param {Number} x
     * @param {Number} y
     * @param {Function} callback
     * @param {Object} normalState
     * @param {Object} hoverState
     * @param {Object} pressedState
     */
    button: function (text, x, y, callback, normalState, hoverState, pressedState, disabledState, shape) {
        ...
    ),

所以你不应该使用 attr() 或 css() 作为样式，而是使用预定义的选项。例如:

var normalState = {
      fill: '#000000',
      style: {
        color: '#FFFFFF'
      }
    },
    hoverState = {
      fill: '#000000',
      style: {
        color: '#FFFFFF'
      }
    }, 
    pressedState = {
      fill: '#000000',
      style: {
        color: '#FFFFFF'
      }
    },
    disabledState = {
      fill: '#000000',
      style: {
        color: '#FFFFFF'
      }
    },
    callback = function () {
        console.log('clicked!');
    }

var testbutton = chart.renderer.button('button1', 0, 10, callback, normalState, hoverState, pressedState, disabledState).attr({ ... }).css({ ... }).add()

当然，所有选项都可以相同:

var styles = {
      fill: '#000000',
      style: {
        color: '#FFFFFF'
      }
    },
    callback = function () {
        console.log('clicked!');
    }

var testbutton = chart.renderer.button('button1', 0, 10, callback, styles, styles, styles, styles).att({ ... }).css({ ... }).add();

最后一个的现场演示:http://jsfiddle.net/NxK39/82/