[]分享：使用 Chart.js 创建图标

LayaAir下使用Chart.js绘制图表，效果如下

代码如下：前提是务必将Chart.js类库通过script标签的方式引入index.html启动文件

package

{

	

	public class FormDemo

	{

		public function FormDemo()

		{

//			初始化舞台

			Laya.init(400,400);

			

//		图标数据

			var data:Object = {

				labels: [  //最上方矩形的标签提示和颜色设置

					"Red",

					"Blue",

					"Yellow"

				],

				

				datasets: [

					{

						data: [300, 50, 100],//所占整个扇形的比率，以及分割份数

						backgroundColor: [  //默认的饼图背景色

							"#FF6384",

							"#36A2EB",

							"#FFCE56"

						],

						hoverBackgroundColor: [//鼠标移入时饼图背景色变化

							"#FF6384",

							"#36A2EB",

							"#FFCE56"

						]

					}]

			};

//			设置  ，譬如设置饼图的镂空、是否有动画等等，更多方法可以参考chart.js官网文档

			var options:Object={

				cutoutPercentage:30//饼图中间镂空

				,animateRotate:true//是否取消动画效果

			};

			

//			图表的宽高：在canvas上写是要被改写的，因为图表框架是根据父容器改变大小的

			__JS__("var div=document.createElement('div')");

			__JS__("div.style.width='400px'");

			__JS__("div.style.height='400px'");

			

//			相对父级定位，并在最上方显示

			__JS__("div.style.position='absolute'");

			__JS__("div.style.zIndex=100");

//			获取laya的div，让饼图的div位于laya的上放

			__JS__('var divLaya=document.getElementById("layaContainer")');

			__JS__("divLaya.parentNode.insertBefore(div,divLaya)");

//			创建一个canvas元素，并获取canvas的2D API，用于图表绘制

			__JS__("var c1=document.createElement('canvas')");

			__JS__("var ctx=c1.getContext('2d')");

			__JS__("div.appendChild(c1)");

//			调用chart.js的方法，并传递对应参数

//				ctx:绘图对象

//				type:图标类型

//				data：图标数据

//				options：配置

			__JS__("var myPieChart = new Chart(ctx,{type: 'pie',data: data,options: options})");

			

		}

	}

}