首先这边我们在网页中做折线图这类带有数据的东西,还是使用一些成型产品会比较好点,你可以站在巨人肩膀上对吧。
这边我们使用一个基于JavaScript的开源可视化图表库——ECharts,这样我们就不需要在从HTML里从头学习,或者说推荐大家要先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,也就是通过使用坐标表换。那么我们就别繁琐地计算每个点的坐标,只要对坐标系整体表换即可。
当我们制作折线图的时候,可能会有很多个折线点,那样看起来可能曲曲折折的,没那么丝滑,咋办?
其实ECharts已经自带了一些参数可以进行设置,以最简单的方式直接给大家列出来。
放出这一段代码即可:
symbol:'none',
//如果这边代码注释掉,或者删掉
那就恢复到常规折线图形态
这样是不是很丝滑的折线了?
然后还有一些其他的参数,其实大家慢慢看也能理解了。例如:
lineStyle:{
type:'dotted'
//设置网格线类型 dotted:虚线 solid:实线
},
线条太细了,想把折线的线条变粗点呢?
lineStyle: {
width: 4,
//折线的宽度
}
当然还有更多功能,甚至可以针对性开发,就不在此赘述。
徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体
https://letus.top/archives/571.html(转载时需注明本文出处及文章链接)
如需转载或刊登,请联系我们获得授权。
如何修改iframe里的css样式及跨域问题讲解
4,341 阅读 - 09/14网页HTML如何实现页面自适应,适配手机屏幕
4,272 阅读 - 10/24分享带缩略图的网页链接到微信朋友圈[方法]
3,981 阅读 - 10/23网页里点击A标签没有反应怎么办?
2,490 阅读 - 04/15一行代码将你网站封装成微信小程序?
2,064 阅读 - 05/12关于微信里已停止访问该网页的解决办法
1,776 阅读 - 09/24SablogX博客安装出现反复检验数据库的错误解决方案
1,416 阅读 - 03/03写博客有个卵用?
1,258 阅读 - 10/01