
- Chart.js 教程
- Chart.js - 主页
- Chart.js - 介绍
- Chart.js - 安装
- Chart.js - 语法
- Chart.js - 基础知识
- Chart.js - 颜色
- Chart.js - 选项
- Chart.js - 交互
- Chart.js - 图例
- Chart.js - 标题
- Chart.js - 动画
- Chart.js - 工具提示
- Chart.js - 折线图
- Chart.js - 柱状图
- Chart.js - 雷达图
- Chart.js - 圆环图
- Chart.js - 饼图
- Chart.js - 极区图
- Chart.js - 气泡图
- Chart.js - 散点图
- Chart.js - 混合图
- Chart.js - 笛卡尔坐标系
- Chart.js - 分类坐标系
- Chart.js - 极坐标系
- Chart.js 实用资源
- Chart.js - 快速指南
- Chart.js - 实用资源
- Chart.js - 讨论
Chart.js - 圆环图
Chart.js 圆环图是用于表示数据集的最常用图表之一。圆环图分为各个部分,其中每个部分的弧形表示每条数据成比例的值。如果您希望显示数据之间的关系比例,圆环图是很好的选择。
以下是用于数据集属性的圆环图中的命名空间 −
data.datasets[index] − 仅为此数据集提供选项。
options.datasets.doughnut − 为所有圆环数据集提供选项。
options.elements.arc − 为所有圆弧元素提供选项。
Options − 为整个图表提供选项
我们需要使用类型:'doughnut' 来创建圆环图。
示例
让我们举一个示例,我们将在其中创建一个圆环图 −
<!DOCTYPE> <html> <head> <meta charset- "UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>chart.js</title> </head> <body> <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script> <script> var chrt = document.getElementById("chartId").getContext("2d"); var chartId = new Chart(chrt, { type: 'doughnut', data: { labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"], datasets: [{ label: "online tutorial subjects", data: [20, 40, 13, 35, 20, 38], backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'], hoverOffset: 5 }], }, options: { responsive: false, }, }); </script> </body> </html>
输出

广告