AngularJS进阶(四十一)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]-->
  
 

  
1
  
2
  
3
  
4
 

准备一个canvas

<div style="width: 50%"> <canvas id="myChart" width="400" height="450"></canvas>
</div>
  
 

  
1
  
2
  
3
 

折线图绘制

第三步
  在创建好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,187,205,1)", // 点的填充颜色 pointColor : "rgba(151,187,205,1)", // 点的外边框颜色 pointStrokeColor : "#fff", // 表的Y轴值 data : dataRiskInd } ] }; // 定义图表的参数    var defaultsParam = { // Y轴的起始值 scaleStartValue :null, // Y/X轴的颜色  scaleLineColor : "rgba(0,0,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,0,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); };
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
 

效果展示：

附 其他参数说明

// 小提示的圆角
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
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

饼图绘制

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

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
 

效果展示：

注

  在饼图中欲显示文字，需要对Chart.js进行修改，修改后的Chart.js文件（点击下载）。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/77689032