利用ichartjs绘制风向风力图

 风向风力图是天气预报中常用的图表，通过本示例，我们可以制作出许多类似的监控图表，应用在各行各业中。

首先，看一下最终的效果图：

制作步骤：

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;	
}

 大功告成。