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

准备一个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文件(点击下载)。

这里写图片描述

这里写图片描述

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...