如何使用ChartJS创建饼图
在本教程中，我们将学习使用ChartJS和一些静态数据绘制饼图。
任务
我们将为两个团队TeamA和TeamB以及他们的5场比赛的得分创建一个饼图-match1，match2，... match5。
项目结构
我们将从以下项目结构开始。
在css文件夹内，我们将创建一个default.css文件。
这将包含默认样式表。
在js文件夹中，我们将创建pie.js文件。
在此文件中，我们将编写代码以创建饼图。
在项目文件夹中，我们将创建一个pie.html文件。
现在，项目结构如下所示。
我的其他教程中的上图中显示了一些其他文件。
pie.html
从index.html文件复制HTML结构，并确保包含了jQuery和ChartJS javascript文件。
现在，在" head"中包含我们创建并保存在css文件夹中的default.css文件。
在" body"内部创建一个div并给它一个类" chart-container"。
在此内部，我们创建两个具有类.pie-chart-container的div。
然后在每个div的内部创建一个画布，并分别给它们指定id" pie-chartcanvas-1"和" pie-chartcanvas-2"。
最后，在关闭" body"标签之前，请包含我们在js文件夹内创建的pie.js javascript文件。
因此，现在我们的pie.html文件将如下所示。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie</title>
<link type="text/css" rel="stylesheet" href="css/default.css"
</head>
<body>
<div class="chart-container">
<div class="pie-chart-container">
<canvas id="pie-chartcanvas-1"></canvas>
</div>
<div class="pie-chart-container">
<canvas id="pie-chartcanvas-2"></canvas>
</div>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/pie.js"></script>
</body>
</html>
default.css
default.css文件将包含以下内容。
.chart-container {
width: 80%;
height: 480px;
margin: 0 auto;
}
.pie-chart-container {
height: 360px;
width: 360px;
float: left;
}
在上面的代码中，我们设置.chart-container类的宽度，高度和边距，对于.pie-chart-container类，我们将宽度和高度设置为360px并将它们并排放置通过将float设置为左。
JavaScript
为了绘制饼图，我们将编写一些javascript。
canvas
首先，通过编写下面的代码，我们将使用它们各自的ID" pie-chartcanvas-1"和" pie-chartcanvas-2"来获得两个画布。
//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");
选项
现在，我们将为图表定义选项。
为此，我们将创建一个" options"对象变量并设置其响应式，标题和图例。
这类似于折线图选项，您可以参考折线图教程。
我们将response设为true以使图具有响应性。
为了创建饼图的标题，我们将为" title"数据对象设置以下内容。
显示：我们将其设置为" true"以使标题出现。
位置：我们将其设置为" top"，以使标题显示在饼图的顶部。
文字：设置为"饼图"
fontSize：控制标题的字体大小。
fontColor：控制标题的字体颜色。
为了为饼图创建图例，我们设置legend属性。
display：设置为" true"以显示图例。
position：设置为" bottom"，定义图例的位置。
标签：用于图例字体的颜色和大小。
您可以查看ChartJS文档并设置其他一些属性。
但是对于本教程，我们将坚持上述属性。
因此，这些选项将如下所示。
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Pie Chart",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
数据
现在是时候创建两个数据变量" data1"和" data2"，它们将保持两支球队的得分-TeamA和TeamB分别代表5场比赛。
标签：这是包含匹配名称的数组。
数据集：这是两个对象的数组，每个团队得分一个。
数据集的每个对象元素都包含以下属性。
标签：鼠标悬停饼图时要显示的标签。
数据：包含每次比赛得分的数组。
backgroundColor：扇形段的十六进制值或者颜色名称的数组。
borderColor：扇形段的十六进制值或者颜色名称的数组。
borderWidth：用于饼图段的边框宽度。
实例化Chart类
我们创建两个变量chart1和chart2并实例化Chart类。
我们传递ctx1和ctx2来保存画布和数据对象。
数据对象包含"类型"属性设置为" pie"，数据属性设置为" data"变量和选项属性设置为" options"。
您也可以在此上查看混色器。
我们对pie.js文件的最终代码
$(function(){
//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");
//pie chart data
var data1 = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [
{
label: "TeamA Score",
data: [10, 50, 25, 70, 40],
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57"
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46"
],
borderWidth: [1, 1, 1, 1, 1]
}
]
};
//pie chart data
var data2 = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [
{
label: "TeamB Score",
data: [20, 35, 40, 60, 50],
backgroundColor: [
"#FAEBD7",
"#DCDCDC",
"#E9967A",
"#F5DEB3",
"#9ACD32"
],
borderColor: [
"#E9DAC6",
"#CBCBCB",
"#D88569",
"#E4CDA2",
"#89BC21"
],
borderWidth: [1, 1, 1, 1, 1]
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Pie Chart",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Chart class object
var chart1 = new Chart(ctx1, {
type: "pie",
data: data1,
options: options
});
//create Chart class object
var chart2 = new Chart(ctx2, {
type: "pie",
data: data2,
options: options
});
});
