Question

render = this.renderer,
colors = Highcharts.getOptions().colors;
                render.label("On_Mouse_Hover_Zoom",100,50).attr({'stroke-
width':1,stroke:'red'}).css({fontSize:'10px'}).add();

此代码的输出类似于 enter image description here

是否有任何方法可以使此标签可缩放或在鼠标悬停时临时增加标签大小，但不应放松其实际大小。

Answer 1

您可以使用CSS轻松完成此操作：

  var label = this.renderer.label("On_Mouse_Hover_Zoom", 0, 0)
  .attr({
    'stroke-width': 1,
    stroke: 'red',
    id: 'your-label'
  })
  .css({
    fontSize: '10px'
  })
  .add();

  #your-label:hover text {
   fill: #efefef;
   font-size: 20px;
   transition: 0.2s;
  }

或使用javascript，但这种方法效率较低：

document.getElementById('your-label').onmouseenter = function() {
  label.attr({
    transform: 'scale(1.2)'
  });
}

document.getElementById('your-label').onmouseleave = function() {
  label.attr({
      transform: 'scale(1)'
  });
}

您可以在此处查看示例：https://jsfiddle.net/wchmiel/p0c1v5w3/

在Highchart总绘图中，使svg标签在鼠标悬停时可缩放

1 个答案: