如何使用ChartJS创建条形图
在本教程中，我们将学习使用ChartJS和一些静态数据绘制条形图。
任务
我们将为两个团队TeamA和TeamB创建条形图，并为其5场比赛的得分-match1，match2，... match5。
项目结构
我们将从以下项目结构开始。
在css文件夹内，我们将创建一个default.css文件。
这将包含默认样式表。
在js文件夹中，我们将创建bar.js文件。
在此文件中，我们将编写代码以创建条形图。
在项目文件夹中，我们将创建一个bar.html文件。
bar.html
从index.html文件复制HTML结构，并确保包含了jQuery和ChartJS javascript文件。
现在，在" head"中包含我们创建并保存在css文件夹中的default.css文件。
<link type="text/css" rel="stylesheet" href="css/default.css"
在" body"内部创建一个div并给它一个类" chart-container"。
然后在这个div内创建一个画布，并为其指定idbar-chartcanvas。
<div class="chart-container"> <canvas id="bar-chartcanvas"></canvas> </div>
最后，在关闭" body"标签之前，请包含我们在js文件夹内创建的bar.js javascript文件。
<script src="js/bar.js"></script>
因此，现在我们的bar.html文件将如下所示。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Bar</title>
<link type="text/css" rel="stylesheet" href="css/default.css"
</head>
<body>
<div class="chart-container">
<canvas id="bar-chartcanvas"></canvas>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/bar.js"></script>
</body>
</html>
default.css
default.css文件将包含以下内容。
.chart-container {
width: 80%;
height: 480px;
margin: 0 auto;
}
在上面的代码中，我们设置.chart-container类的宽度，高度和边距。
JavaScript
为了绘制条形图，我们将编写一些javascript。
canvas
首先，通过编写以下代码，我们将使用其ID为bar-chartcanvas的画布。
//get the bar chart canvas
var ctx = $("#bar-chartcanvas");
选项
现在，我们将为图表定义选项。
为此，我们将创建一个options对象变量并设置其响应，标题，图例和比例属性。
我们将response设为true以使图具有响应性。
为了创建条形图的标题，我们将为" title"数据对象设置以下内容。
显示：我们将其设置为" true"以使标题出现。
位置：我们将其设置为"顶部"，以使标题显示在条形图的顶部。
文字：设置为"条形图"
fontSize：控制标题的字体大小。
fontColor：控制标题的字体颜色。
为了为条形图创建图例，我们设置legend属性。
display：设置为" true"以显示图例。
position：设置为" bottom"，定义图例的位置。
标签：用于图例字体的颜色和大小。
最后，为了使y轴从0开始，我们设置了scales属性。
您可以查看ChartJS文档并设置其他一些属性。
但是对于本教程，我们将坚持上述属性。
因此，这些选项将如下所示。
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Bar Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
};
数据
现在该创建一个"数据"变量了，该变量将保存两队的TeamA和TeamB的5场比赛的得分。
标签：这是包含匹配名称的数组。
数据集：这是两个对象的数组，每个团队得分一个。
数据集的每个对象元素都包含以下属性。
标签：鼠标悬停在栏上时要显示的标签。
数据：包含每次比赛得分的数组。
backgroundColor：条形的十六进制值或者颜色名称的数组。
borderColor：条形的十六进制值或者颜色名称的数组。
borderWidth：这是条的边框宽度。
实例化Chart类
我们创建一个可变的图表并实例化Chart类。
我们通过ctx来保存画布和一个数据对象。
数据对象包含"类型"属性设置为" bar"，数据属性设置为" data"变量和选项属性设置为" options"。
如果要创建水平条，则将类型设置为horizontalBar。
我们的bar.js文件的最终代码
$(function(){
//get the bar chart canvas
var ctx = $("#bar-chartcanvas");
//bar chart data
var data = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [
{
label: "TeamA Score",
data: [10, 50, 25, 70, 40],
backgroundColor: [
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)"
],
borderColor: [
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)"
],
borderWidth: 1
},
{
label: "TeamB Score",
data: [20, 35, 40, 60, 50],
backgroundColor: [
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)"
],
borderColor: [
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)"
],
borderWidth: 1
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Bar Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
};
//create Chart class object
var chart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
});
