最近的工作中准备做一个折线图去显示设备的当前温度变化，最开始准备使用echarts进行了相关的定制以及进行了压缩但是发现最小的大小还是300多K字节，由于我们的网页程序存储在flash上，flash的空间大小为2m其中还要留一半给固件程序升级使用，所以空间大小让我只能望洋兴叹，还要兼容老的一些浏览器不敢完全去使用canvas，所以只能使用svg，由于本人也是初次的使用svg还想实现echarts的一些功能和特效，最起码需要在鼠标悬浮在节点上时显示当前节点的信息，也浏览了很多人的做法，感觉没太明白，自己鼓捣了一下算是实现了这个功能希望能和大家一起分享，如果有更好的方式请大家不吝指教。话不多说上程序。
<code> ><
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"
>0text
><
text
x
="60"
y
="460"
>10text
><
text
x
="60"
y
="420"
>20text
><
text
x
="60"
y
="380"
>30text
><
text
x
="60"
y
="340"
>40text
><
text
x
="60"
y
="300"
>50text
><
text
x
="60"
y
="260"
>60text
><
text
x
="60"
y
="220"
>70text
><
text
x
="60"
y
="180"
>80text
><
text
x
="60"
y
="140"
>90text
><
text
x
="60"
y
="100"
>100text
><
text
x
="80"
y
="80"
>温度(摄氏度)text
><
text
x
="100"
y
="520"
>0text
><
text
x
="130"
y
="520"
>1text
><
text
x
="170"
y
="520"
>2text
><
text
x
="210"
y
="520"
>3text
><
text
x
="250"
y
="520"
>4text
><
text
x
="290"
y
="520"
>5text
><
text
x
="330"
y
="520"
>6text
><
text
x
="370"
y
="520"
>7text
><
text
x
="410"
y
="520"
>8text
><
text
x
="450"
y
="520"
>9text
><
text
x
="490"
y
="520"
>10text
><
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
>/<code>
整体的设计思路是使用一个p标签作为显示tooltips的内容，同时监测svg标签内circle标签鼠标移入和移除的事件并对事件进行处理，设置p标签的位置属性为absolute由于整个页面中没有可以作为参考点的位置所以只能相对于body元素这正是我们想要的且设置隐藏属性为真。
当鼠标悬浮在circle标签上方时使用mouseover事件获取当前鼠标所在的位置，同时获取此circle标签的data-title属性中的值，设置p标签的style属性位置，顶点坐标和内部文本的内容以及移除隐藏属性。当鼠标移除此p标签的范围时给p标签添加隐藏属性。这样就实现了svg折线图节点鼠标悬浮时tooltip显示的功能。
最终的样式如下图所示。
