基本信息
源码名称：js评级分布图(chartjs)
源码大小：0.09M
文件格式：.zip
开发语言：js
更新时间：2020-01-17
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html>
<!-- saved from url=(0071)https://www.chartjs.org/samples/latest/scales/time/line-point-data.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>评级分布图</title>  
	<script async="" src="./analytics.js"></script>
	<script src="./moment.min.js"></script>
	<script src="./Chart.min.js"></script>
	<script src="./utils.js"></script>
	<style>
		canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
	</style>
	<style type="text/css">/* Chart.js */
		@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
	</style>
</head>
<body>
	<div style="width:100%;">
		<canvas id="canvas" style="display: block; width: 1428px; height: 714px;background-color:rgba(231,230,230)" width="1428" height="714" class="chartjs-render-monitor"></canvas>
	</div>
	<script>
		var color = Chart.helpers.color;
		var config = {
			type: 'line',
			data: {
				datasets: [{
					label: '户数（占比%）',
					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
					borderColor: window.chartColors.red,
					fill: false,
					data: [1,1,5,3,1,1],//占比
					number: [11,11,11,11,11,11]//数
				}, {
					label: '表内外余额-亿元（占比%）',
					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
					borderColor: window.chartColors.blue,
					fill: false,
					data: [1,2,6,9,3,1],//占比
					number: [22,22,22,22,22,22]//数
				}]
			},
			options: {
				
				hover: {
				    animationDuration: 0  // 防止鼠标移上去，数字闪烁
				},
				animation: {           // 这部分是数值显示的功能实现
				    onComplete: function () {
						var chartInstance = this.chart,
						ctx = chartInstance.ctx;
						// 以下属于canvas的属性（font、fillStyle、textAlign...）
						ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
						ctx.fillStyle = "black";
						ctx.textAlign = 'top';
						ctx.textBaseline = 'bottom';
						this.data.datasets.forEach(function (dataset, i) {
							var meta = chartInstance.controller.getDatasetMeta(i);
							meta.data.forEach(function (bar, index) {
								if(i==1){
									var data = dataset.data[index];
									var number = dataset.number[index];
									if(index==dataset.data.length-1){
										ctx.fillText(number '(' data '%)', bar._model.x-30, bar._model.y-5);
									}else{
										ctx.fillText(number '(' data '%)', bar._model.x, bar._model.y-5);
									}
								}else{
									var data = dataset.data[index];
									var number = dataset.number[index];
									if(index==dataset.data.length-1){
										ctx.fillText(number '(' data '%)', bar._model.x-30, bar._model.y 20);
									}else{
										ctx.fillText(number '(' data '%)', bar._model.x, bar._model.y 20);
									}
									
								}
								
							});
						});	
						
				  }
				},
				responsive: true,
				title: {
					display: true,
					text: '评级分布图'
				},
				scales: {
					xAxes:[{
						type: 'category',
						axisTick: {
							alignWithLabel: true,
						},
						axisLine: {
							onZero: true,						
						},	
						scaleLabel: {
							display: false,
							labelString: '评级'
						},
						labels: ["AAA(0.04%)", "AA (0.07%)", "AA(0.14%)", "AA-(0.35%)", "A (0.70%)", "A(1.15%)"]										
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: false,
							labelString: '占比'
						},
						ticks: {
							beginAtZero: true,
							callback: function(label,index,labels){
								return Math.floor((label)) '%';
							}
						}
					}]
				},
				tooltips: {
					callback: {
						label: function(tooltipItem,chart){
							vardatasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
							return datasetLabel   ':'   tooltipItem.yLabel   "%";
						}
					}
				}
			}
		};
		
		var ctx = document.getElementById('canvas').getContext('2d');
		window.onload = new Chart(ctx, config);
		
		setInterval(function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			var chart = new Chart(ctx, config);
			chart.update();
		},1000*60);
	
		
	
	</script>

</body>
</html>