svg做自定义折线图表

设计稿：

做好的效果图：（细节自己慢慢调整）

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>
svg line {shape-rendering: crispEdges;
} svg{font-family: '微软雅黑'}
</style>
<body>
<svg width="420" height="280" viewBox="0,0,420,280"><g><line x1="0" y1="30" x2="420" y2="30"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="0" y1="100" x2="420" y2="100"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="0" y1="170" x2="420" y2="170"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="0" y1="240" x2="420" y2="240"style="stroke:rgb(143,143,143); stroke-width:2"></line><line x1="30" y1="0" x2="30" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="100" y1="0" x2="100" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="170" y1="0" x2="170" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="240" y1="0" x2="240" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="310" y1="0" x2="310" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line><line x1="380" y1="0" x2="380" y2="240"style="stroke:rgb(143,143,143); stroke-width:1"></line></g><g>        <text x="10" y="258" fill="#333">03.12</text><text x="80" y="258" fill="#333">06.15</text><text x="150" y="258" fill="#333">06.18</text><text x="220" y="258" fill="#333">07.11</text><text x="290" y="258" fill="#333">08.02</text><text x="360" y="258" fill="#333">09.18</text></g><g><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(36,185,13,0.4); stop-opacity:1"/><stop offset="100%" style="stop-color:rgba(255,255,255,0.6); stop-opacity:1"/></linearGradient></defs><path d="M30,110 L100,210 L170,60 L240,40 L310,50 L380,140 L380,240 L30,240 Z" style="fill:url(#orange_red);stroke:none;"/> <polyline points="30,110 100,210 170,60 240,40 310,50 380,140" style="fill:none;stroke:#3fc371;stroke-width:2"/></g>  <g><circle cx="30" cy="110" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/><circle cx="30" cy="110" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/><circle cx="100" cy="210" r="4" stroke="none" fill="#3fc371"/><circle cx="170" cy="60" r="4" stroke="none" fill="#3fc371"/><circle cx="240" cy="40" r="4" stroke="none" fill="#3fc371"/><circle cx="310" cy="50" r="4" stroke="none" fill="#3fc371"/><circle cx="380" cy="140" r="4" stroke="none" fill="#3fc371"/><circle cx="380" cy="140" r="4" stroke="rgba(63,195,113,0.4)"
stroke-width="4" fill="#3fc371"/><circle cx="380" cy="140" r="8" stroke="rgba(63,195,113,0.4)"
stroke-width="1" fill="none"/></g>
</svg>
</body>
</html>

svg做自定义折线图表相关推荐

PBI中使用SVG自定义折线缩略图
1. 目的驱动在学习别人做的报表的时候,我有看到如下图所示的效果. 我个人觉得这个趋势图比较有意思,于是就研究了一下是如何画出来的. 经研究发现,这个就是用SVG画出来的. 前面介绍SVG的时候提到 ...
Android高级自定义，手势滑动缩放/渐变填充/曲线折线图表
/ 今日科技快讯 / 近日网易公司发布2020年第四季度及2020财政年度业绩.根据财报,网易公司第四季度净收入为人民币197.6亿元,同比增长25.6%.第四季度,网易公司各项业务稳健发展. ...
新手如何画出自定义View(Android——自定义折线图)
在正式开始之前我还是打算先说几句废话: 1.本文章是让初学者画自定义View所以不会对代码进行过多的解释 2.为什么不用现有强大的图表框架列如:Android HelloChart 或者 MPAn ...
5、Power Query-抓取网页数据做漂亮的图表
数据来源之网页数据--抓取网页数据做漂亮的图表要求:根据百度百科网站词条http://baike.baidu.com/item/NBA中的历届总冠军表目做出动态图表. 这次就直接拷贝这个Web地址咯 ...
折线图表android,Android 折线图表MPAndroidChart的实现
昨日夜观天象,今日忽见北斗星陨落,<Android 折线图表>应运而生. single.png many.png 一.本篇采用MPAndroidChart,大体实现步骤可分为两步: 1.配 ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言在移 ...
08_android_打造通用svg地图自定义组件
android_打造通用svg地图自定义组件一.地图svg数据准备这里笔者已经整理了云南省16个地州.129个县的svg path数据,如果你要绘制的是其他省份,甚至是中国地图,那么可以从下面这个 ...
Python使用matplotlib函数subplot可视化多个不同颜色的折线图、自定义数据点的形状、自定义折线图的颜色
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.自定义数据点的形状.自定义折线图的颜色目录

svg做自定义折线图表

svg做自定义折线图表相关推荐

最新文章

热门文章