分享:使用 Chart.js 创建图标

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

111.png

代码如下:前提是务必将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})");

}
}
}

 
具体更多更精彩的写法请参考git官方分享文档示例已上传,请参考附件
 
已邀请:

weiyongwill

赞同来自: cuixueying

多谢指点,已经跑起来了。百度的Echarts效果超绚丽

要回复问题请先登录注册