高图表折线图中的单击并保持突出显示选项

Click-and-stay-highlighted option in Highcharts line chart?

本文关键字：显示 选项 折线图 单击 高图表      更新时间：2023-09-26

它可能要求太多了。我在灰色的折线图中列出了世界上大多数国家的线条。我实现了鼠标悬停效果，当用户将鼠标悬停在该行上时，该行以红色突出显示，并在他继续移动时回退到默认的灰色。

现在，我希望用户能够单击折线

图中的折线，只要用户再次单击它，它就会突出显示。但是mouseOut功能显然可以防止"保持红色突出显示"。不知何故，一旦用户单击该行，就应该有一个标志附加到该行，该标志正在mouseOut函数中进行检查。

类似的东西

    click: function()
    {
        this.graph.attr('stroke', '#FF0000');
        if (this.graph.attr('flag').value === "clicked")
        {
            this.graph.attr('flag', '');
        }
        else
        {
            this.graph.attr('flag', 'clicked');
        }
    },
    mouseOver: function()
    {
        this.graph.attr('stroke', '#FF0000');
    },
    mouseOut: function() 
    {
        if (this.graph.attr('flag').value === "clicked")
        {
            // do nothing
        }
        else
        {
            this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');
        }
    }

这是一个小提琴。

有什么方法可以为此使用属性吗？我不清楚哪些属性实际上可用。

感谢您的任何提示。

将自己的 flag 属性添加到 this.graph 中。然后，您可以在click和mouseout事件中检查flag：

if(!this.graph.flag)
   this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');

这是一个例子： http://jsfiddle.net/f3rgendb/7/

相关文章：