AngularJS中使用Chart.js制折线图与饼图实例
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。
其中用到的软件：
Chart.js框架，版本1.0.2，一个简单、轻量级的绘图框架，基于HTML5 canvas。这个框架能很多种图，折线图、柱状图、玫瑰图等。
excanvas.js，这是一个专门解决canvas IE兼容问题的框架。因为IE9已经支持canvas，所有<=IE8引入这个库就可以了。
第一步
准备好chart.js和excanvas.js(用于ie浏览器兼容)
下载地址：https://github.com/nnnick/Chart.js
参考文档地址：http://www.bootcss.com/p/chart.js/docs/
第二步
先在html页面中引用2个js，excanvas.js可以解决它在ie7，ie8兼容性问题
<script type="text/javascript" src="Chart.js"></script>
<!--[if lte IE 8]> <script src="excanvas.js"></script> <![endif]-->
准备一个canvas
<div style="width: 50%">
<canvas id="myChart" width="400" height="450"></canvas>
</div>
折线图绘制
第三步
在创建好canvas之后，我们需要创建一个，用于设置图表上的各个参数。
当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。制作一张折线图的流程就结束了,若要创建其他类型图建议去查看官网中文文档。
controllers.js：
$scope.draw = function(results) {
var length = results.length;
var timeRiskInd = new Array();
var dataRiskInd = new Array();
for (var i = 0; i < length; i++){
var time = results[i].time;
var riskInd = results[i].riskInd;
timeRiskInd.push(time);
dataRiskInd.push(riskInd);
}
// 用于存放图表上的数据
var data = {
// 表的X轴参数
labels : timeRiskInd,datasets : [
{
// 背景色，常用transparent透明
fillColor : "rgba(151,187,205,0.5)",// 线条颜色，也可用"#ffffff"
strokeColor : "rgba(151,1)",// 点的填充颜色
pointColor : "rgba(151,// 点的外边框颜色
pointStrokeColor : "#fff",// 表的Y轴值
data : dataRiskInd
}
]
};
// 定义图表的参数
var defaultsParam = {
// Y轴的起始值
scaleStartValue :null,// Y/X轴的颜色
scaleLineColor : "rgba(0,.1)",// X,Y轴的宽度
scaleLineWidth : 1,// 刻度是否显示标签,即Y轴上是否显示文字
scaleShowLabels : true,// Y轴上的刻度,即文字
scaleLabel : "<%=value%>",// 字体
scaleFontFamily : "'Arial'",// 文字大小
scaleFontSize : 20,// 文字样式
scaleFontStyle : "normal",// 文字颜色
scaleFontColor : "#666",// 是否显示网格
scaleShowGridLines : true,// 网格颜色
scaleGridLineColor : "rgba(0,.05)",// 网格宽度
scaleGridLineWidth : 2,// 是否使用贝塞尔曲线? 即:线条是否弯曲
bezierCurve : false,// 是否显示点数
pointDot : true,// 圆点的大小
pointDotRadius : 8,// 圆点的笔触宽度,即:圆点外层边框大小
pointDotStrokeWidth : 1,// 数据集行程
datasetStroke : true,// 线条的宽度,即:数据集
datasetStrokeWidth : 2,// 是否填充数据集
datasetFill : false,// 是否执行动画
animation : true,// 动画的时间
animationSteps : 60,// 动画的特效
animationEasing : "eaSEOutQuart",// 动画完成时的执行函数
onAnimationComplete : null
}
var ctx =
document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data);
};
效果展示：
附 其他参数说明
// 小提示的圆角
tooltipCornerRadius: 0,// 折线的曲线过渡，0是直线，默认0.4是曲线
bezierCurveTension: 0,// bezierCurveTension: 0.4,// 关闭曲线功能
bezierCurve: false,// 背景表格显示
scaleShowGridLines : false,//自定义背景小方格、y轴每个格子的单位、起始坐标
scaleOverride: true,scaleSteps: 9.5,// scaleStepWidth: Math.ceil(Math.max.apply(null,data.datasets[0].data) / 0.1),scaleStepWidth: 0.05,scaleStartValue: 1
饼图绘制
$scope.draw = function(results) {
var length = results.length;
var timeRiskInd = new Array();
var dataRiskInd = new Array();
for (var i = 0; i < length; i++){
var time = results[i].time;
var riskInd = results[i].riskInd;
timeRiskInd.push(time);
dataRiskInd.push(riskInd);
}
var pieData = [
{
value: 30,color:"#F38630",text: "抵押 15%"
},{
value : 50,color : "#E0E4CC",text: "负债 23%"
},{
value : 100,color : "#69D2E7",text: "净利润 65%"
}
];
var options = {
//是否显示每段行程（即环形区，不为true则无法看到后面设置的边框颜色）
segmentShowStroke: true,//设置每段行程的边框颜色
segmentStrokeColor: "#fff",//设置每段环形的边框宽度
segmentStrokeWidth: 2,//图标中心剪切圆的比例（0为饼图，接近100则环形宽度越小）50
percentageInnerCutout: 0,//是否执行动画
animation: true,//执行动画时间
animationSteps: 120,//动画特效
animationEasing: "eaSEOutBounce",//是否旋转动画
animateRotate: true,//是否缩放图表中心
animateScale: true,//动画完成时的回调函数
onAnimationComplete: null
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(pieData,options);
};
效果展示：
注
在饼图中欲显示文字，需要对Chart.js进行修改，修改后的Chart.js文件（点击下载）。
