javascript - 如何使用 highcharts 在渲染器按钮中添加正常状态、悬停状态、按下状态和禁用状态下的按钮图像？

Question

我在 highcharts 中使用了渲染器按钮。我有正常的、悬停的和单击的按钮图像。我想在渲染器按钮的状态下使用该图像。我该如何使用它？我尝试过以下代码，但不起作用

var normalState = {};    
normalState.backgroundImage = "url(../assets/newBoxButton_normal.png)";

var hoverState = {};    
hoverState.backgroundImage = "url(../assets/newBoxButton_over.png)";

var pressedState = {};    
pressedState.backgroundImage = "url(../assets/newBoxButton_clicked.png)";

var disabledState = {};    
disabledState.backgroundImage = "url(../assets/newBoxButton_normal.png)";

var newBox = chart.renderer.button('Button',74,10,function(){
                                alert("Renderer button");   
                            },normalState,hoverState,pressedState,disabledState)
                             .add();

提前致谢。

Answer 1

SVG 元素没有背景图像属性。您可以将图像放入模式标签中，然后通过 fill: url(#/pattern-id/) 在 fill 属性中引用它。

在渲染按钮之前，您需要图案和图像:

function addImagesAsPatterns(chart) {
  const renderer = chart.renderer
  const images = [
    ['normal', 'https://png.icons8.com/bar/ios7/25'],
    ['hover', 'https://png.icons8.com/bar-filled/ios7/25'],
    ['pressed', 'https://png.icons8.com/bar/office/16'],
    ['disabled', 'https://png.icons8.com/beer/ios7/25']
  ]

  function addPattern(imageUrl, id) {
    const pattern = chart.renderer.createElement('pattern').add(chart.renderer.defs).attr({
      width: 1,
      height: 1,
      id
    })

    renderer.image(imageUrl, 0, 0, 30, 30).add(pattern)
  }

  const ids = images.map(image => {
    const id = 'img-' + image[0]
    addPattern(image[1], id)

    return id
  })

  return ids
}

渲染按钮:

function renderButton () {
  const ids = addImagesAsPatterns(this)
  const url = id => `url(#${id})`

  this.cButton = this.renderer.button(null, this.plotLeft, this.plotTop, function () {
    this.setState(this.state === 2 ? 0 : 2)
  }, {fill: url(ids[0]), 'stroke-width': 2}, {fill: url(ids[1])}, {fill: url(ids[2])}, {fill: url(ids[3])}, 'rect').attr({ width: 15, height: 15}).add()
}

加载时调用:

  chart: {
    events: {
      load: renderButton
    }
  },

示例:http://jsfiddle.net/qjzr0sje/