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

myzbx 2025-04-29 02:33 11 浏览

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

<!DOCTYPE html>
<html>
    <head>
        <title>温度监控</title>
        <meta charset="utf-8">
        <style>
           svg circle:hover{
               fill: whitesmoke;
               r:6;
           }
           div::after{
               content: "";
           }
        </style>
    </head>
    <body style="width: 1920px;height: 1080px;">
        <svg id="svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">            
            <text x="200" y="80" fill="blue" font-size="24">温度监测</text>
            <line x1="100" y1="500" x2="100" y2="100"
                style="stroke:rgb(255,0,0);stroke-width:2"/>
            <line x1="100" y1="500" x2="500" y2="500"
                style="stroke:rgb(255,0,0);stroke-width:2"/>
            <text x="60" y="500"  >0</text>
            <text x="60" y="460"  >10</text>
            <text x="60" y="420"  >20</text>
            <text x="60" y="380"  >30</text>
            <text x="60" y="340"  >40</text>
            <text x="60" y="300"  >50</text>
            <text x="60" y="260"  >60</text>
            <text x="60" y="220"  >70</text>
            <text x="60" y="180"  >80</text>
            <text x="60" y="140"  >90</text>
            <text x="60" y="100"  >100</text>
            <text x="80" y="80"  >温度(摄氏度)</text>
            <text x="100" y="520"  >0</text>
            <text x="130" y="520"  >1</text>
            <text x="170" y="520"  >2</text>
            <text x="210" y="520"  >3</text>
            <text x="250" y="520"  >4</text>
            <text x="290" y="520"  >5</text>
            <text x="330" y="520"  >6</text>
            <text x="370" y="520"  >7</text>
            <text x="410" y="520"  >8</text>
            <text x="450" y="520"  >9</text>
            <text x="490" y="520"  >10</text>
            <text x="520" y="500"  >监测点</text>
            <circle  cx="104" cy="496" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="开始检测"/>
            <circle cx="134" cy="456" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：10"/>
            <circle cx="174" cy="326" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：42"/>
            <circle cx="214" cy="326" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：42"/>
            <circle cx="254" cy="136" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：87"/>
            <circle cx="294" cy="123" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：93" />
            <circle cx="334" cy="453" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：13"/>
            <circle cx="374" cy="417" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：18"/>
            <circle cx="414" cy="200" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：72"/>
            <circle cx="454" cy="241" r="3" stroke="black"
                stroke-width="1" fill="blue" data-title="温度：62"/>
            <line x1="100" y1="500" x2="104" y2="496" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="104" y1="496" x2="134" y2="456" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="134" y1="456" x2="174" y2="326" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="174" y1="326" x2="214" y2="326" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="214" y1="326" x2="254" y2="136" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="254" y1="136" x2="294" y2="123" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="294" y1="123" x2="334" y2="453" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="334" y1="453" x2="374" y2="417" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="374" y1="417" x2="414" y2="200" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
            <line x1="414" y1="200" x2="454" y2="241" 
                style="stroke:rgba(167, 10, 83, 0.541);stroke-width:2"/>
        </svg>
        <p id="tooltip" hidden style="position: absolute;top: 100px;left: 100px;">吉富逵到此一游</p>
    </body>
    <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>
</html>

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

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

最终的样式如下图所示。

SVG 折线

上一篇：建模大神都在用的软件，哝晓得不?
下一篇：SVG交互图文|推送里的路径动画是怎么做到的?

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

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」