AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
来源:互联网 发布:javaweb项目源码下载 编辑:程序博客网 时间:2024/05/29 11:13
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]-->
准备一个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,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); };
效果展示:
附 其他参数说明
// 小提示的圆角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文件(点击下载)。
- AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
- Chart.js使用教程,画折线图实例
- angularjs自定义折线图+滑动条指令
- AngularJs 基础与进阶
- 使用WinForm Chart控件 制作饼装,柱状,折线图
- Bootstrap3 datetimepicker在AngularJs中使用实例
- angularJs在控制器中使用过滤器实例
- Bootstrap3 datetimepicker在AngularJs中使用实例
- <<AngularJS入门与进阶>>笔记
- Ext JS与AngularJS
- JS 中 调用AngularJs
- angularjs进阶
- AngularJS自定义Echarts标签 — 折线图Line
- AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
- 利用canvas+Chart.js实现动态折线图
- 在R中绘制折线图的方法与进阶
- AngularJS中service与factory的使用
- xftp连接阿里云失败
- UVA
- 原生解析方式下的生成数据
- python中opencv,cv2.pyd下载
- CTF/CTF练习平台-phpcmsV9【phpcms 9.6 漏洞利用】
- AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
- 表达式计算
- MarkDown初次练习
- php中 implode() 和explode()的区别
- Windows语音朗读测试
- 寻找大富翁
- 对抗神经网络模型(GANs)作为当下最火的神经网络模型
- R:绘图-彩色饼图等
- 大数据Hadoop Yarn 框架原理及运作机制_02_02