欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用ichartjs绘制风向风力图

程序员文章站 2022-06-07 22:45:43
...

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

首先,看一下最终的效果图:

利用ichartjs绘制风向风力图
            
    
    博客分类: ichartjsHTML5

制作步骤:

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绘制风向风力图
            
    
    博客分类: ichartjsHTML5
  • 大小: 26.9 KB