Web前端最全AngularJS进阶(四十一)AngularJS中使用Chart(1)，2024年最新程序员面试指南

2401_84433807

于 2024-05-16 17:30:28 发布

阅读量335

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84433807/article/details/138969489

版权

程序员专栏收录该内容

177 篇文章 2 订阅

订阅专栏

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

第一步
准备好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