运用小程序绘制圆形进度条和面积图，展现数据变化的生动方式

前端

2023-12-30 15:59:28

数据可视化中的圆形进度条和面积图：增强小程序用户体验

圆形进度条

在小程序开发中，圆形进度条是一种强大的工具，可以清晰直观地呈现进度信息。它由一个环形和一个进度条组成，环形表示总进度，而进度条表示当前进度。进度条可以根据需要定制颜色和样式，增强用户体验。

实现圆形进度条

使用圆形进度条非常简单：

在 WXML 文件中定义一个画布元素，并设置其宽高。
在 JavaScript 文件中，使用 wx.createCanvasContext 函数创建一个画布上下文对象。
使用画布上下文对象的 arc 方法绘制圆环。
使用画布上下文对象的 fillRect 方法绘制进度条。
使用 wx.drawCanvas 函数将画布内容绘制到小程序界面上。

代码示例：

<canvas id="progress-bar" style="width: 200px; height: 200px;"></canvas>

// JavaScript 代码

const ctx = wx.createCanvasContext('progress-bar');

// 绘制圆环
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.stroke();

// 绘制进度条
ctx.fillStyle = '#675bba';
ctx.fillRect(80, 100, 40, 160);

// 绘制进度条文本
ctx.font = 'bold 16px Arial';
ctx.fillText('50%', 90, 110);

ctx.draw();

面积图

面积图通过折线图和横轴之间的面积来展示数据的变化趋势。它可以揭示数据的整体趋势以及局部波动，非常适合展示数据随时间或其他因素的变化。

实现面积图

实现面积图也同样简单：

在 WXML 文件中定义一个画布元素，并设置其宽高。
在 JavaScript 文件中，使用 wx.createCanvasContext 函数创建一个画布上下文对象。
使用画布上下文对象的 moveTo 和 lineTo 方法绘制折线图。
使用画布上下文对象的 fill 方法填充折线图和横轴之间的面积。
使用 wx.drawCanvas 函数将画布内容绘制到小程序界面上。

代码示例：

<canvas id="area-chart" style="width: 200px; height: 200px;"></canvas>

// JavaScript 代码

const ctx = wx.createCanvasContext('area-chart');

// 绘制 x 轴
ctx.beginPath();
ctx.moveTo(50, 180);
ctx.lineTo(190, 180);
ctx.stroke();

// 绘制 y 轴
ctx.beginPath();
ctx.moveTo(50, 180);
ctx.lineTo(50, 20);
ctx.stroke();

// 绘制折线图
ctx.beginPath();
ctx.moveTo(60, 160);
ctx.lineTo(80, 120);
ctx.lineTo(100, 150);
ctx.lineTo(120, 110);
ctx.lineTo(140, 140);
ctx.lineTo(160, 100);
ctx.lineTo(180, 130);
ctx.stroke();

// 填充折线图和横轴之间的面积
ctx.fillStyle = '#675bba';
ctx.fill();

ctx.draw();