默认情况下，HighCharts自定义按钮悬停并按更改颜色

Question

我正在尝试使用"chart.renderer.button"与默认颜色。但是，在悬停或按下时，颜色似乎默认会发生变化......我不希望在悬停和按下按钮时颜色发生变化。如果可以完成简单的修复程序，请告诉我

这是小提琴：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/