Question

我在highcharts中使用了Renderer按钮。我正常，悬停和点击图像的按钮。我想在渲染器按钮状态下使用该图像。我该怎么用？我试过以下代码，但没有工作

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元素没有background-image属性。您可以将图像放在模式标记内，然后通过fill: url(#/pattern-id/)在填充属性中引用它。

在渲染按钮之前，您需要使用图案和图像：

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/

如何使用highcharts在Renderer按钮中以normalstate，hoverstate，press state和disabled状态添加按钮图像？

1 个答案: