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

附上效果图：

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画布绘制饼图和甜甜圈图

如何使用html+Chart画甜甜圈图相关推荐

R语言如何绘制饼图/甜甜圈图（15）
1.什么是饼图/甜甜圈图? 在工作中如果遇到需要计算总费用或金额的各个部分构成比例的情况,一般都是通过各个部分与总额相除来计算,而且这种比例表示方法单看数字很抽象,我们可以使用一种饼形图表,能够直接以 ...
16、17、18_使用gridspec定义多子图,条形图（Bar plots）,分组条形图,堆叠条形图(Stacked bar chart),饼图（Pie plots）,甜甜圈图,嵌套饼图
16.使用gridspec定义多子图 16.1.图标题 17.条形图(Bar plots) 17.1.分组条形图 17.2.堆叠条形图(Stacked bar chart) 18.饼图(Pie plo ...
R语言使用ggplot2可视化甜甜圈图（Donut chart）
R语言使用ggplot2可视化甜甜圈图(Donut chart) 目录 R语言使用ggplot2可视化甜甜圈图(Donut chart) #仿真数据
使用Telerik控件库制作WPF项目中的折线图、柱状图、饼图和甜甜圈图
本博客是基于 .Net Framework 4.6.2 的WPF(MVVM)项目,Telerik版本为 2016.2.613.40.其他版本是否可用不详. 本文章所使用数据均为测试数据,无任何意义. ...
R语言绘图—甜甜圈图
R语言绘图-甜甜圈图不太想打字了,直接上图,感兴趣的可以点链接查看: R语言绘图-甜甜圈图
chart.js-饼状图和甜甜圈图
定义canvas <canvas id="currentMonthChart" width="400" height="300"> ...
用matplotlib.pyplot绘制甜甜圈图
# 用matplotlib绘制甜甜圈饼图 # The effect of the donut shape is achieved by setting a width to the pie's wed ...
chart.js 饼图显示百分比_实战PyQt5: 135-数据可视化之QChart绘制饼图
饼图是数据可视图表的基本类型,在QChart中,QPieSeries, QPieSlice处理饼图的绘制. QPieSeries QPieSeries类以饼图形式显示数据.饼图系列由定义为QPieSl ...
chart.js使用用法
下面的链接是不同的图的实例,请先看本文了解大概,再看不同的统计图的实现使用chart.js画折线图甜甜圈图和饼状图 chart.js使用用法定义画布 <canvas id="my ...

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

如何使用html+Chart画甜甜圈图相关推荐

最新文章

热门文章