如何使用html+Chart画甜甜圈图

最新推荐文章于 2024-05-14 02:27:52 发布

栖身星河之中

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量482

点赞数 1

分类专栏： html JS笔记文章标签： html5 css javascript

本文链接：https://blog.csdn.net/ml12818/article/details/115392332

版权

html 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

JS笔记

5 篇文章 0 订阅

订阅专栏

附上效果图：

在这里插入图片描述
Chart.js的插件资源
提取码：ml28
html+css+js
1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>甜甜圈</title>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/Chart.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
</head>
	<body onload="myfun()">
		<canvas id="doughnutChart" class="carousel"></canvas>
		<canvas id="myCanvas"></canvas>
	</body>
</html>

2.js代码

function myfun(){
	//1.第一个甜甜圈
var data = {
	labels: ["逾期30天项目", "逾期60天项目", "逾期180天项目"],
	datasets: [{
		//甜甜圈的颜色
		backgroundColor: ["rgba(255,215,0, 0.8)", "rgba(220,20,60, 0.8)", "rgba(0,255,255,0.8)"],
		//每个块占的大小
		data: [60, 50, 30]
	}]
};
var options = {
	//false是不显示说明字，默认是显示
	//      legend: {
	//          display: false,
	//
	//      }
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var doughnutChart = new Chart(ctx, {
	type: 'doughnut', //doughnut是甜甜圈?图形,pie是饼状图
	data: data,
	options: options
});

//2.第二个甜甜圈
var myVinyls = {
//每个块占的大小
	"One": 3,
	"Two": 14,
	"Three": 2,
	"Four": 12
};

function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.moveTo(centerX, centerY);
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	ctx.closePath();
	ctx.fill();
}
var myCanvas = document.getElementById("myCanvas");
//宽高
myCanvas.width = 100;
myCanvas.height = 50;

var ctx = myCanvas.getContext("2d");

var Piechart = function(options) {
	this.options = options;
	this.canvas = options.canvas;
	this.ctx = this.canvas.getContext("2d");
	this.colors = options.colors;

	this.draw = function() {
		var total_value = 0;
		var color_index = 0;
		for(var categ in this.options.data) {
			var val = this.options.data[categ];
			total_value += val;
		}

		var start_angle = 0;
		for(categ in this.options.data) {
			val = this.options.data[categ];
			var slice_angle = 2 * Math.PI * val / total_value;

			drawPieSlice(
				this.ctx,
				this.canvas.width / 2,
				this.canvas.height / 2,
				Math.min(this.canvas.width / 2, this.canvas.height / 2),
				start_angle,
				start_angle + slice_angle,
				this.colors[color_index % this.colors.length]
			);

			start_angle += slice_angle;
			color_index++;
		}

		if(this.options.doughnutHoleSize) {
			drawPieSlice(
				this.ctx,
				this.canvas.width / 2,
				this.canvas.height / 2,
				this.options.doughnutHoleSize * Math.min(this.canvas.width / 2, this.canvas.height / 2),
				0,
				2 * Math.PI,
				"#ffffff"
			);
		}

	}
}
var myDougnutChart = new Piechart({
	canvas: myCanvas,
	data: myVinyls,
	//甜甜圈的颜色
	colors: ["#fde23e", "#f16e23", "#57d9ff", "#937e88"],
	doughnutHoleSize: 0.5
});
myDougnutChart.draw();
}

转载于：如何使用JavaScript和HTML5画布绘制饼图和甜甜圈图

栖身星河之中

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用html+Chart画甜甜圈图

附上效果图：Chart.js的插件资源提取码：ml28html+css+js1.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>甜甜圈</title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8".
复制链接

扫一扫

专栏目录