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

最新推荐文章于 2024-04-11 00:37:10 发布

jifukui

最新推荐文章于 2024-04-11 00:37:10 发布

阅读量1k

点赞数

分类专栏：前端综合文章标签： javascript svg

本文链接：https://blog.csdn.net/jifukui/article/details/108589253

版权

本文介绍了在资源有限的环境下，如何使用SVG代替Echarts创建折线图，并实现节点的Tooltip功能。通过监听SVG中的circle元素的mouseover和mouseout事件，动态更新提示信息的位置和内容，达到鼠标悬停时显示节点信息的效果。

摘要由CSDN通过智能技术生成

最近的工作中准备做一个折线图去显示设备的当前温度变化，最开始准备使用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<

最低0.47元/天解锁文章

jifukui

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用svg做折线图以及节点tooltips显示

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

扫一扫

专栏目录