デフォルトの色で「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();*
ボタンを作成するとき、コンストラクターはソースコードからより多くの引数を取ります。
/**
* 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/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加