我要的是横向的从y轴出发的
时间: 2024-02-13 20:06:24 浏览: 10
好的,以下是一个横向柱状图从y轴出发的canvas代码示例:
```html
<template>
<canvas canvas-id="canvas" style="width: 100%; height: 400rpx;"></canvas>
</template>
<script>
export default {
onReady() {
const context = uni.createCanvasContext('canvas', this);
// 数据
const data = [
{ label: 'A', value: 10 },
{ label: 'B', value: 20 },
{ label: 'C', value: 30 },
{ label: 'D', value: 15 },
{ label: 'E', value: 25 },
];
// 计算最大值
const maxValue = Math.max(...data.map(item => item.value));
// 绘制柱状图
const startX = 50;
const startY = 350;
const barHeight = 20;
const gap = 10;
const chartWidth = 300;
data.forEach((item, index) => {
const x = startX;
const y = startY - (barHeight + gap) * index - barHeight;
const width = item.value / maxValue * chartWidth;
context.fillStyle = '#007aff';
context.fillRect(x, y, width, barHeight);
context.fillStyle = '#333';
context.fillText(item.label, x - 40, y + barHeight / 2);
});
context.draw();
},
};
</script>
```
这个示例中,我们通过canvas绘制了一个简单的横向柱状图,其中包括了数据、最大值的计算,以及柱状图的绘制。与之前的示例不同,这个示例中柱状图是从y轴出发的,而不是从x轴出发的。你可以根据自己的需要,修改其中的数据、样式等内容。