Chart.js使用及ajax获取数据

最新推荐文章于 2021-08-06 22:36:40 发布

极客李

最新推荐文章于 2021-08-06 22:36:40 发布

阅读量4.6k

点赞数 3

分类专栏：图表插件文章标签： Chart.js vue

本文链接：https://blog.csdn.net/qq_43085502/article/details/88873011

版权

图表插件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

图表插件Chart.js使用

插件简介
- 安装

插件简介

条形图
折线图
chart.js是一个优秀的开源图表处理插件，内置条形，折现，雷达，时间刻度等等图表渲染。

安装

chart.js官网.
我这里使用2019年3月4日发布的2.8版本.

下载之后拷贝dist文件夹，我改名为charts
得到在这里插入图片描述

基础写法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Chart使用</title>
	</head>

	<body>
		<script src="charts/Chart.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="charts/Chart.css" />

		<div style="height: 400px; width: 400px;">
			<canvas id="myChart"></canvas>
		</div>

		<script>
			var ctx = document.getElementById('myChart').getContext('2d');//声明绘制2d对象
			var myChart = new Chart(ctx, {//绑定标签并渲染
				type: 'bar',//声明为条形图bar
				data:{
					labels: ['红', '篮', '黄', '绿', '紫', '橙'],//labels:标签名
					datasets: [{//数据集
						label: ['选项'],//
						data: [12, 19, 3, 5, 2, 8],
						backgroundColor: [//背景颜色，透明度
							'rgba(255, 99, 132, 0.2)',
							'rgba(54, 162, 235, 0.2)',
							'rgba(255, 206, 86, 0.2)',
							'rgba(75, 192, 192, 0.2)',
							'rgba(153, 102, 255, 0.2)',
							'rgba(255, 159, 64, 0.9)'
						],
						borderColor: [//线条颜色
							'rgba(255, 99, 132, 2)',
							'rgba(54, 162, 235, 1)',
							'rgba(255, 206, 86, 9)',
							'rgba(75, 192, 192, 1)',
							'rgba(153, 102, 255, 1)',
							'rgba(255, 159, 64, 1)'
						],
						borderWidth: 1//线条粗细
					}]
				},
				options: {//配置项
					
					maintainAspectRatio: true,//相应式选项
					onHover: function(){
						//alert("我是鼠标移入移出事件");
					},
					onClick: function(){
						alert("我是点击事件");
					},
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true//值是否从0开始递增
							}
						}]
					}
				}
			});
		</script>

	</body>

</html>

在这里插入图片描述
进阶写法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Chart使用</title>
	</head>

	<body>
		<script src="charts/Chart.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="charts/Chart.css" />

		<div style="height: 400px; width: 400px;">
			<canvas id="myChart"></canvas>
		</div>

		<script>
			var barData={//新建dataset对象
			labels: ['我是选项1','我是选项2','我是选项3','我是选项4','我是选项5','我是选项6','我是选项7'],
			datasets: [{
				label: '对学员出勤的检查与管理',
				backgroundColor: 'rgba(256, 255, 132, 0.2)',
				borderWidth: 1,
				data: [
					199,
					192,
					174,
					492,
					699,
					799,
					199
				]
			}, {
				label: '巡班并制止学员违纪现象',
				backgroundColor: 'rgba(255, 99, 132, 0.2)',
				
				borderWidth: 1,
				data: [
					199,
					192,
					174,
					492,
					699,
					799,
					199
				]
			}]

		}
			
			var ctx = document.getElementById('myChart').getContext('2d');//声明绘制2d对象
			var myChart = new Chart(ctx, {//绑定标签并渲染
				type: 'bar',//声明为条形图bar
				data: barData,
				options: {//配置项
					
					maintainAspectRatio: true,//是否响应式选项
					onHover: function(){
						//alert("我是鼠标移入移出事件");
					},
					onClick: function(){
						alert("我是点击事件");
					},
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true//值是否从0开始递增
								
								
							}
						}]
					}
				}
			});
		</script>

	</body>

</html>

效果图
在这里插入图片描述
AJAX获取数据
这里本人使用vue异步刷新

<script type="text/javascript">

new Vue({
				el: '#sel',
				data: {
					map:{}
			},
			methods: {
			ajaxGetDetail: function(gid){
				
			}
			}
this.$http.post("/ajaxGetDetail",{gid:gid},{emulateJSON:true}).then(function(res){
                                this.map=res.body;//map为已定义的对象，键值对应lables和data

							var labels=[];
                            var data=[];
                            myChartData = {//初始化数据
                                labels: labels,
                                datasets: [{
                                    data: data,
                                    backgroundColor: "rgba(255, 99, 132, 0.2)",
                                    borderWidth: 1
                                }]
                            }
                            for (var key in this.map.map){//将数据储存
                                labels.push(key)
                                data.push(this.map.map[key])
                            }
                            myChartData.datasets.forEach(function(datasets) {//循环判断data的值是否小于4，小于4改变颜色
                                datasets.backgroundColor = datasets.data.map(function(data) {
                                    return data < 4 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(102, 174, 255, 0.2)';
                                });

                            });

                        
                                myChart.data = myChartData; //重新赋值
                                window.myChart.update(); //更新视图
					

                        },function(res){
                            console.log("请求失败处理")
                        })
})
 </script>