代码之家  ›  专栏  ›  技术社区  ›  Jijo Cleetus

鼠标悬停在海图中时隐藏折线图

  •  0
  • Jijo Cleetus  · 技术社区  · 6 年前

    我用HighChart绘制了两条线,当用户将鼠标移到绘图区域时,我需要隐藏一条线。有人能帮我吗? 下面是我尝试过的jsFiddle链接。

    JSFiddle link

    HTML

    <script src="https://code.highcharts.com/highcharts.js"></script>
    
    <div id="container" style="height: 400px"></div>
    

    javascript

    Highcharts.chart('container', {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                           console.log("mouse over");
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                       console.log("mouse out");
                    }
                }
            }
        },
    series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            visible: true
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   ppotaczek    6 年前

    你可以用 隐藏 mouseover事件中特定系列的方法。

    events: {
      mouseOver: function() {
        this.hide();
      }
    }
    

    现场演示: https://jsfiddle.net/BlackLabel/ynq7fobe/

    应用程序编程接口: https://api.highcharts.com/class-reference/Highcharts.Series#hide