小程序折线图

素颜马尾好姑娘i 2022-05-31 06:19 99阅读 0赞

##### 注意要点： #####

1，通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候，创建 canvas 绘图上下文需要使用wx.createCanvasContext(canvasId, this)，有疑问请查看微信小程序api介绍[https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canvas-context.html][https_developers.weixin.qq.com_miniprogram_dev_api_canvas_create-canvas-context.html]  
2，使用canvasContext.setLineDash虚线完成之后，可以通过以下方式让之后的线条变回实线。

canvasContext.setLineDash([10,0],0)

3，使用canvasContext.createLinearGradient渐变之后，可以通过以下方式让之后的画笔回归正常效果

let bgrd = context.createLinearGradient(0, 0, 1, 1);
      bgrd.addColorStop(0, items.point.bColor)
      bgrd.addColorStop(1, items.point.bColor)
      context.setFillStyle(bgrd);

##### 效果图： #####

![1518158067(1).jpg][1518158067_1_.jpg]

git地址：[https://github.com/fuxingkai/frankui-weapp][https_github.com_fuxingkai_frankui-weapp]

[https_developers.weixin.qq.com_miniprogram_dev_api_canvas_create-canvas-context.html]: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/create-canvas-context.html
[1518158067_1_.jpg]: /images/20220531/93e14c76afe14ef9bfbf2790b0504bb1.png
[https_github.com_fuxingkai_frankui-weapp]: https://github.com/fuxingkai/frankui-weapp

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】第一个小程序——创建小程序项目

目录小程序简介第一个小程序安装开发者工具创建小程序项目小程序简介 1. 小程序与普通网页开发的区别 ![17e1b9a120564ed2b1c85

曾经终败给现在/ 2024年03月30日 11:07/ 0 赞/ 109 阅读

相关 mpvue框架做微信小程序，在小程序页面做折线图

使用mpvue做微信小程序项目时，需要做折线图，可以使用： 1.echarts-for-weixin,官方echarts的小程序版本。使用参考：[echarts-for-we

系统管理员/ 2023年06月17日 10:54/ 0 赞/ 22 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 302 阅读

相关 jfreechart 折线图

第一次上岗工作，头一个任务：用JFreeChart做折线图。网上搜了好多资料，但对于我这个新手来说好像总显得那么深奥，经过两天的整理测试，稍微弄出了点思路，自己记录下，附上我的

桃扇骨/ 2022年08月20日 05:16/ 0 赞/ 211 阅读

相关 JFreeChart 折线图

在我前面的博文讲到了JFreeChart报表图形：[JFreeChart 3D饼图][JFreeChart 3D] [JFreeChart 柱形图][JFreeChar

﹏ヽ暗。殇╰゛Y/ 2022年07月16日 09:56/ 0 赞/ 243 阅读

相关小程序折线图

注意要点： 1，通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候，创建 canvas 绘图上下文需要使用wx.createCan

素颜马尾好姑娘i/ 2022年05月31日 06:19/ 0 赞/ 100 阅读

相关小程序双折线图

注意要点： 1，通过小程序提供的canvas组件来绘制。需要注意地方是自定义的组件的包含canvas的时候，创建 canvas 绘图上下文需要使用wx.createCan

素颜马尾好姑娘i/ 2022年05月27日 00:12/ 0 赞/ 117 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 386 阅读

相关 gdi+ 折线图

panle 为画图的容器， data 每个项为数据输入格式为 1,2,3,4 time 格式为 "10:20,10:30,10:40 " name 格式为 "

女爷i/ 2022年04月01日 10:38/ 0 赞/ 259 阅读

相关微信-小程序：小程序

<table> <tbody> <tr> <td><span style="font-size:16px;color:FFFFFF;"><strong>ylb

╰半夏微凉°/ 2021年11月17日 15:16/ 0 赞/ 796 阅读