使用svg做折线图以及节点tooltips显示

最近的工作中准备做一个折线图去显示设备的当前温度变化，最开始准备使用echarts进行了相关的定制以及进行了压缩但是发现最小的大小还是300多K字节，由于我们的网页程序存储在flash上，flash的空间大小为2m其中还要留一半给固件程序升级使用，所以空间大小让我只能望洋兴叹，还要兼容老的一些浏览器不敢完全去使用canvas，所以只能使用svg，由于本人也是初次的使用svg还想实现echarts的一些功能和特效，最起码需要在鼠标悬浮在节点上时显示当前节点的信息，也浏览了很多人的做法，感觉没太明白，自己鼓捣了一下算是实现了这个功能希望能和大家一起分享，如果有更好的方式请大家不吝指教。话不多说上程序。

    
        
        
        
    
    
        
        
    
    <script>
        var svg = document.getElementById("tooltip");
        var circle = document.querySelectorAll("#svg circle")
        circle.forEach((value)=>{
            value.addEventListener("mouseover",function(info){
                svg.innerText=this.getAttribute("data-title");
                svg.setAttribute("style",`position: absolute;top: ${info.y+10}px;left: ${info.x+10}px;`)
                svg.removeAttribute("hidden"); 
            });
            value.addEventListener("mouseout",function(info){
                setTimeout(() => {
                    svg.setAttribute("hidden",true);
                }, 200);
            });
        })
    </script>

整体的设计思路是使用一个p标签作为显示tooltips的内容，同时监测svg标签内circle标签鼠标移入和移除的事件并对事件进行处理，设置p标签的位置属性为absolute由于整个页面中没有可以作为参考点的位置所以只能相对于body元素这正是我们想要的且设置隐藏属性为真。

当鼠标悬浮在circle标签上方时使用mouseover事件获取当前鼠标所在的位置，同时获取此circle标签的data-title属性中的值，设置p标签的style属性位置，顶点坐标和内部文本的内容以及移除隐藏属性。当鼠标移除此p标签的范围时给p标签添加隐藏属性。这样就实现了svg折线图节点鼠标悬浮时tooltip显示的功能。

最终的样式如下图所示。