canvas 画柱状图

画一个简单的柱状图

注意点：
- 画柱状图矩形图的时候需要先填充后描边再使用 fillRect 等！
  ctx.fillStyle = “red”;
  ctx.lineWidth = 2;
  ctx.fillRect(200, 200, 20, 200);

<template><div><canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低，请升级浏览器或者使用谷歌浏览器</canvas></div>
</template><script>
export default {name: "CanvasText",components: {},data() {return {};},mounted() {let can = this.$refs.canvasRef;let ctx = can.getContext("2d");// 画一个简单的柱状图// 画坐标轴ctx.beginPath();ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(400, 400);ctx.strokeStyle = "#000";ctx.lineWidth = 2;ctx.stroke();ctx.closePath();// 画柱状图 矩形图ctx.fillStyle = "red";ctx.lineWidth = 2;ctx.fillRect(200, 200, 20, 200);},methods: {}
};
</script>
<style lang="scss" scoped></style>

随机的柱状图

<template><div><canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低，请升级浏览器或者使用谷歌浏览器</canvas></div>
</template><script>
export default {name: "CanvasText",components: {},data() {return {};},mounted() {let can = this.$refs.canvasRef;let ctx = can.getContext("2d");// 画一个简单的柱状图// 画坐标轴ctx.beginPath();ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(400, 400);ctx.strokeStyle = "#000";ctx.lineWidth = 2;ctx.stroke();ctx.closePath();// 画柱状图 矩形图ctx.lineWidth = 2;// 范围 [10,290]for (let i = 0; i < 6; i++) {let height = Math.random() * 280 + 10;// ctx.fillStyle = "#00ff00";ctx.fillStyle = "#" + parseInt(Math.random() * 0xffffff).toString(16);// 注意点：就是坐标的话 需要 400 - height (为了贴住x轴)ctx.fillRect(120 + 40 * i, 400 - height, 20, height);}},methods: {}
};
</script>
<style lang="scss" scoped></style>

canvas 画柱状图相关推荐

canvas画柱状图和饼图
学习扔物线大大的教程 http://hencoder.com/ui-1-1/ https://github.com/hencoder/PracticeDraw1 饼图的指示文字还需要重新计算一下还有防 ...
如何用h5标签canvas画柱状图【立体】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
html绘制直角坐标系,canvas画直角坐标系
canvas画直角坐标系 2017年3月17日利用canvas画直角坐标系其实挺简单的,只要确定了原点(0,0)点,也可以是其他的点,只要自己知道那是原点就行!知道了原点再分别向X轴方向和Y轴方向画 ...
python(matplotlib)画柱状图（1）
写在前面的话当当当,又要总结画图了,现在写博客都有一种美妆博主在写美妆心得的介绍.biubiu- 今天要记录的内容就是我们的python 画柱状图. 画柱状图一般我觉得就是数据可以被枚举的有限的,并 ...
python画柱状图画折线图
# 画柱状图 plt.bar(x_labels, grid) 画折线图 """ for i in range(len(grid)-1): ...
python 画柱状图-Python 使用 matplotlib 画柱状图教程
Python 使用 matplotlib 画图是非常方便的,之前的文章记录了<Python 使用 matplotlib 画折线图教程>,今天就再次记录一下使用 matplotlib 画柱状 ...
python画直方图代码-python plotly画柱状图代码实例
这篇文章主要介绍了python plotly画柱状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码 import pandas as ...
python画柱状图代码-python plotly画柱状图代码实例
这篇文章主要介绍了python plotly画柱状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码 import pandas as ...
python横向柱状图-python画柱状图--不同颜色并显示数值的方法
用python画柱状图容易,但是如何对不同柱子使用不同颜色呢?同时在柱子顶端显示精确数值? 主要用的方法为: atplotlib.pyplot.bar(left, height, width=0.8, ...

canvas 画柱状图

目录

canvas 画柱状图

画一个简单的柱状图

随机的柱状图

canvas 画柱状图相关推荐

最新文章

热门文章