AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例

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]-->1234

准备一个canvas

<div style=\"width: 50%\">

<canvas id=\"myChart\" width=\"400\" height=\"450\"></canvas>

</div>123

折线图绘制

第三步

在创建好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);

};1234567101112131415161718192021222324252627282930313233343536373839404142434447484950515253555657585960616263656667686970717273747576777879808182838485

效果展示： 附 其他参数说明

// 小提示的圆角

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: 11234567101112131415

饼图绘制

$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,

},

{

}

];

var options = {

color : \"#E0E4CC\"

,text: \"负债 23%\"

value : 100,

color : \"#69D2E7\"

,text: \"净利润 65%\"

//是否显示每段行程（即环形区，不为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);

};12345671011121314151617181920212223242526272829303132333435363738394041424344474849505152535556

效果展示： 注

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