写点什么

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

  • 2022-12-16
    上海
  • 本文字数:3253 字

    阅读完需:约 11 分钟

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 浏览器兼容)


下载地址参考文档


第二步先在 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 文件(点击下载)。

发布于: 刚刚阅读数: 9
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例_AngularJS_No Silver Bullet_InfoQ写作社区