数据可视化清新版【chart.js】学习笔记13.0—图表配置

最新推荐文章于 2023-11-16 09:06:39 发布

LIMI_伞梦

最新推荐文章于 2023-11-16 09:06:39 发布

阅读量800

点赞数

分类专栏：数据可视化前端编程文章标签：数据可视化 javascript 前端

本文链接：https://blog.csdn.net/qq_36288559/article/details/112533141

版权

前端编程同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

数据可视化

14 篇文章 4 订阅

订阅专栏

数据可视化清新版【chart.js】学习笔记

1、动画(animations)

options: {
	animation: {
		duration:1000,//动画所需时间，毫秒数
		easing:'easeOutQuart',//动画趋势，比如线性
		numSteps:10000,//动画帧数
		animateRotate:true,//图表将使用旋转动画进行动画处理，环形图，饼图，极地图专属
		animateScale:false,//使图表从中心向外缩放。环形图，饼图，极地图专属
		onProgress(animation) {//进程过程中调用方法
			console.log('进度'+animation.animationObject.currentStep / animation.animationObject.numSteps);
		},
		onComplete(animation){//完成调用方法
			console.log('完成'+animation.animationObject.currentStep / animation.animationObject.numSteps);
		},
	},
}

2、布局(layout)

options: {
	layout: {
		padding: {
			left: 0,
			right: 0,
			top: 0,
			bottom: 0
		}
	},
}

3、图例(legend)

options: {
	legend:{
		display:true,//图例展示
		position:'top',//图例展示位置
		fullWidth:true,//是否铺满画布，此配置不常改变
		onClick(chart){//标签项点击的回调事件
			console.log(chart);
		},
		onHover(chart){//标签项悬停的回调事件
			console.log(chart);
		},
		reverse:true,//以相反的顺序显示数据集
		labels:{
			boxWidth:40,//图例宽度
			fontSize:12,//图例字体大小
			fontStyle:'normal',//图例字体样式
			fontColor:"#c25534",//图例字体颜色
			fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'",//图例字体集
			padding:10,//每个图例之间的间距
			usePointStyle:true,//图例圆形展示
		},
	},
}

4、标题(title)

options: {
	title: {
		display: true,//标题展示
		position:'bottom',//标题位置
		fontSize:12,//标题字体大小
		fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'",//标题字体集
		fontStyle:'normal',//标题字体样式
		fontColor:"#c25534",//标题字体颜色
		padding:10,//标题文本上下方间距
		lineHeight:1.2,//文本行高
		text: 'Custom Chart Title',//标题
	},
}

5、提示(tooltip)

options: {
	tooltips:{
		enabled:true, //是否开启提示
		position:'average' ,//提示的位置. 更多…
		backgroundColor:'rgba(0,0,0,1)', //背景色
		titleFontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'", //标题字体
		titleFontSize:12, //标题字号
		titleFontStyle:'bold', //标题样式
		titleFontColor:'#fff', //标题颜色
		titleSpacing:2, //添加到每个标题顶部和底部的内间距
		titleMarginBottom:6, //标题部分的下外间距
		bodyFontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'", //内容的字体
		bodyFontSize:12, //内容字体大小
		bodyFontStyle:'normal', //内容字体样式
		bodyFontColor:'#fff', //内容字体颜色
		bodySpacing:20, //内容的上下内间距
		footerFontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'", //页脚字体(指提示框的底部，下同)
		footerFontSize:12, //页脚字体大小
		footerFontStyle:'bold', //页脚字体样式
		footerFontColor:'#fff', //页脚字体颜色
		footerSpacing:2, //页脚上下内间距
		footerMarginTop:6, //页脚的外边距
		xPadding:6, //提示框的左右内边距
		yPadding:6, //提示框的上下内边距
		caretSize:5, //提示箭头大小，单位:px
		cornerRadius:0, //提示框圆角
		multiKeyBackground:'#fff',//当多个项目位于提示框中时，颜色会在彩色框后面绘制
		displayColors:true, //如果为 true，则工具提示中会显示颜色框
		borderColor:'rgba(255,255,255,1)', //边框颜色
		borderWidth:10, //边框大小
	},
}

6、通用配置(elements)

options: {
	scales: {
		suggestedMin: 0,//雷达图，极地图最小值
		suggestedMax: 20,//雷达图，极地图最大值
		yAxes: [{//y轴
			position: 'right',//y轴位置
			ticks: {
				beginAtZero:true//从零开始
			},
			stacked: true,//堆叠
		}],
		xAxes: [{//x轴
			position: 'top',//x轴位置
			ticks: {
				beginAtZero:true//从零开始
			},
			stacked: true,//堆叠
		}]
	},
	startAngle:1*Math.PI,//饼图环形图极地图开始偏转角度
	circumference:1*Math.PI,//饼图环形图允许图形覆盖
}

数据可视化清新版【chart.js】学习笔记

LIMI_伞梦

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
数据可视化清新版【chart.js】学习笔记13.0—图表配置

1、动画(animations)options: { animation: { duration:1000,//动画所需时间，毫秒数 easing:'easeOutQuart',//动画趋势，比如线性 numSteps:10000,//动画帧数 animateRotate:true,//图表将使用旋转动画进行动画处理，环形图，饼图，极地图专属 animateScale:false,//使图表从中心向外缩放。环形图，饼图，极地图专属 onProgress(animation) {/
复制链接

扫一扫