2024年最新AngularJS进阶(四十一)AngularJS中使用Chart，github面经

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                	// 背景色，常用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);		
};

效果展示：  
 ![这里写图片描述](https://img-blog.csdn.net/20170829221545501?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VuaHVhcWlhbmcx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)


### 三、其他参数说明

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

### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![html5](https://img-blog.csdnimg.cn/img_convert/e787ffb7c2e9356f709ce93af72dec34.webp?x-oss-process=image/format,png)

性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-O2xp3s0g-1715694771204)]