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/