利用ichartjs绘制风向风力图
程序员文章站
2022-06-07 22:45:37
...
风向风力图是天气预报中常用的图表,通过本示例,我们可以制作出许多类似的监控图表,应用在各行各业中。
首先,看一下最终的效果图:
制作步骤:
1、选择折线图作为基础图形。
var chart = new iChart.LineBasic2D({ //... });
2、加载一个箭头图片。
var image = new Image(); image.src = "arrow.png"; image.onload = function(){ create();//创建图表方法 }
3、在parsePoint事件中将方向值传入至具体的点上。
parsePoint:function(d,v,x,y,j){ return {angle:angle[j]};//将每个点的角度值传递到每个点上 }
4、在draw事件中根据参数绘图箭头。
draw:function(L){ var Q; for(var i=0;i<L.lines.length;i++){ Q = L.lines[i].get('points'); for(var j=0;j<Q.length;j++){ //在此处根据Q[j].angle获取角度值,绘制方向箭头 this.T.c.save(); this.T.c.translate(Q[j].x,Q[j].y); this.T.c.rotate(Q[j].angle * Math.PI / 180); this.T.c.drawImage(image,-12,-12,24,24); this.T.c.restore(); } } return true; }
大功告成。
上一篇: 利用ichartjs绘制风向风力图