徐伟轩博客-不只关注网站设计开发的自媒体

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码
TypechoJoeTheme

如何让网页中折线图的折线变得平滑

徐伟轩博主
2022-08-01
/
0 评论
/
90 阅读
/
357 字
08月01

首先这边我们在网页中做折线图这类带有数据的东西,还是使用一些成型产品会比较好点,你可以站在巨人肩膀上对吧。
这边我们使用一个基于JavaScript的开源可视化图表库——ECharts,这样我们就不需要在从HTML里从头学习,或者说推荐大家要先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,也就是通过使用坐标表换。那么我们就别繁琐地计算每个点的坐标,只要对坐标系整体表换即可。
当我们制作折线图的时候,可能会有很多个折线点,那样看起来可能曲曲折折的,没那么丝滑,咋办?

其实ECharts已经自带了一些参数可以进行设置,以最简单的方式直接给大家列出来。
放出这一段代码即可:

symbol:'none', 
//如果这边代码注释掉,或者删掉
那就恢复到常规折线图形态

这样是不是很丝滑的折线了?

然后还有一些其他的参数,其实大家慢慢看也能理解了。例如:

lineStyle:{
     type:'dotted'
//设置网格线类型 dotted:虚线 solid:实线
     },

线条太细了,想把折线的线条变粗点呢?

 lineStyle: {
     width: 4,    
//折线的宽度
         }

当然还有更多功能,甚至可以针对性开发,就不在此赘述。

赞(0)
赞赏
感谢您的支持,我们会继续努力哒!
版权:

徐伟轩博客-不只关注网站设计开发的自媒体

本文链接:

https://letus.top/archives/571.html(转载时需注明本文出处及文章链接)

如无特别注明,本站内容为原创。

如需转载或刊登,请联系我们获得授权。

评论 (0)
本篇文章评论功能已关闭

亲爱的朋友

一切伟大,源于勇敢的开始。

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云