介绍
这篇文章主要介绍JS怎么使用帆布技术模仿echarts柱状图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
JavaScript是什么 JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
帆布画布是html5中新增的标签,可以通过JS操作画布绘图API在网页中绘制图像。
百度开发了一个开源的可视化图表库echarts,功能非常强大,可以实现折线图,柱状图,散点图,饼图,K线图,地图等多种图表。很多项目都有使用过echarts开发过图表功能。
本实例教程使用原生JS教你开发一个仿echarts的柱状图,学习本教程之前,读者需要具备HTML和css技能,同时需要有简单的JavaScript基础。
按照echarts的开发方法,图表都是生成在一个HTML元素中,所以本实例中也先准备一个id名为canvasWrap的div元素,如下所示:
& lt; div 类=癱anvas_wrap", id=癱anvasWrap"祝辞& lt;/div> 然后在canvasWrap元素中创建帆布元素,再在画布元素上绘制柱状图,开发之前,按照惯例,还是先分析柱状图的具体操作,再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。
1。编写柱状图数据
2。获取canvasWrap元素及宽高
3。创建绘图环境
3.1创建帆布画布
3.2设置帆布画布的宽度和高度
3.3将帆布画布放入到canvasWrap元素中
3.4创建绘图上下文环境
4。设定坐标区域
5。绘制x轴
5.1绘制轴线
5.2绘制刻度线
5.3绘制刻度名称
6。绘制y轴
6.1绘制轴线
6.2绘制刻度线
6.3绘制刻度值
6.4绘制x轴网格线
7。绘制柱图
7.1计算柱图宽度
7.2计算柱图高度
7.3计算柱图X起点
7.4计算柱图Y起点
7.5绘制柱图
具体代码如下:
//1,编写柱状图数据
option =, {//x轴才能数据
,,xAxis: {
数据:,,,,(& # 39;我的# 39;,,& # 39;星期二# 39;,,& # 39;结婚# 39;,,& # 39;星期四# 39;,,& # 39;星期五# 39;,,& # 39;坐在# 39;,,& # 39;太阳# 39;】
,,},//柱才能图数据
,,系列:[{
,,,//多写几组数据,用于查看不同数据时的图表效果
,,,//,数据:,(0.01,0.2,0.05,0.07,0.04,0.13,0.9),
,,,//,数据:,(1,,1,,,,,,,,1,,9],
,,,//,数据:,(1213年,30岁,150年,80年,70年,910年,630年),
数据:,,,,(120,,199,,150,180,70,110,130]。
,,,//图形样式:柱图
,,,类型:,& # 39;酒吧# 39;
})才能
};//创建图表函数,包装:图表父元素id;数据:图表数据
function fnCharts(包装,数据){//2。才能获取canvasWrap元素
var 才能;eWrap =, . getelementbyid(包装);//2。才能获取canvasWrap元素宽度和高度,用于设置帆布画布大小
var 才能;nWrapW =, eWrap.offsetWidth;
var 才能;nWrapH =, eWrap.offsetHeight;//3.1,才能创建帆布画布
var 才能;eCanvas =, document.createElement(& # 39;帆布# 39;);//3.2,才能设置帆布画布的宽度和高度
时间=eCanvas.width 才能;nWrapW;
时间=eCanvas.height 才能;nWrapH;//3.3,才能将帆布画布放入到canvasWrap元素中
eWrap.appendChild才能(eCanvas);//3.4,才能创建绘图上下文环境(才能够在画布上画布上绘制)
var 才能;oCtx =, eCanvas.getContext (& # 39; 2 d # 39;);//4 .设才能定坐标区域左上角和右下角//起才能点设置为50.5,而不是整数,是为了让线条变清晰
var 才能;nZoneStartX =, 50.5;
var 才能;nZoneStartY =, 50.5;
var 才能;nZoneEndX =, nWrapW 作用;nZoneStartX;
var 才能;nZoneEndY =, nWrapH 作用;nZoneStartY;//5.1,才能使用线条函数绘制x轴轴线
fnCreatLine才能(nZoneStartX, nZoneEndY, nZoneEndX nZoneEndY);//计才能算x轴长度
var 才能;nLonX =, nZoneEndX 作用;nZoneStartX;//才能获取x轴数据数组长度
var 才能;nDataLon =, option.xAxis.data.length;//根才能据x轴数据数组长度循环,在循环中绘制刻度线和刻度数值名称
,,(let 我=0;iJS怎么使用帆布技术模仿echarts柱状图
