【问题标题】:In highchart general drawing make svg label zoomable on mouse hover在 highchart 一般绘图中,使 svg 标签在鼠标悬停时可缩放
【发布时间】:2018-12-18 14:33:36
【问题描述】:
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

有没有办法让这个标签在鼠标悬停时可以缩放或临时增加标签大小,但它不应该失去它的实际大小。

【问题讨论】:

    标签: javascript svg highcharts jquery-svg


    【解决方案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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-06-01
      • 2012-12-16
      • 2021-09-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-07
      相关资源
      最近更新 更多