如何使用ChartJS创建折线图
在本教程中，我们将学习使用ChartJS和一些静态数据绘制折线图。
任务
我们将为两个团队TeamA和TeamB创建折线图，并为其5场比赛的得分-match1，match2，... match5。
项目结构
我们将从以下项目结构开始。
现在在css文件夹中创建一个default.css文件。
这将包含默认样式表。
在js文件夹中，创建line.js文件。
在此文件中，我们将编写代码以创建折线图。
然后在项目文件夹中创建一个" line.html"文件。
这是折线图页面。
现在，项目结构如下所示。
请忽略上图中显示的其他文件。
它们是我在GitHub存储库中保存该项目时创建的。
line.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内创建一个画布，并为其指定idline-chartcanvas。
<div class="chart-container"> <canvas id="line-chartcanvas"></canvas> </div>
最后，在关闭" body"标签之前，请包含我们在js文件夹内创建的line.js javascript文件。
<script src="js/line.js"></script>
因此，现在我们的line.html文件将如下所示。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Line</title>
<link type="text/css" rel="stylesheet" href="css/default.css"
</head>
<body>
<div class="chart-container">
<canvas id="line-chartcanvas"></canvas>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/line.js"></script>
</body>
</html>
default.css
是时候编写一些CSS来对line.html页面进行样式设置了。
打开default.css文件并编写以下样式代码。
.chart-container {
width: 80%;
height: 480px;
margin: 0 auto;
}
在上面的代码中，我们针对类.chart-container并设置其宽度，高度和边距。
随意定义自己的样式。
我将始终鼓励您尝试使用该代码并自己尝试。
JavaScript
现在该创建线形图了。
canvas
首先，通过编写以下代码，我们将使用其idline-chartcanvas获取画布。
//get the line chart canvas
var ctx = $("#line-chartcanvas");
选项
现在，我们将为图表定义选项。
为此，我们将创建一个options对象变量并设置其响应，标题和图例属性。
为了使图响应，我们将" response"设置为true。
为了为线图创建标题，我们将为" title"数据对象设置以下内容。
显示：我们将其设置为" true"以使标题出现。
位置：我们将其设置为" top"，以使标题显示在折线图的顶部。
文字：设置为"折线图"
fontSize：控制标题的字体大小。
fontColor：控制标题的字体颜色。
您可以查看ChartJS文档并设置其他一些属性。
但是对于本教程，我们将坚持上述属性。
最后，为线形图创建图例，我们设置" legend"属性。
display：设置为" true"以显示图例。
position：设置为" bottom"，定义图例的位置。
标签：用于图例字体的颜色和大小。
因此，这些选项将如下所示。
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
数据
现在该创建一个"数据"变量了，该变量将保存两队的TeamA和TeamB的5场比赛的得分。
标签：这是包含匹配名称的数组。
数据集：这是两个对象的数组，每个团队得分一个。
数据集的每个对象元素都包含以下属性。
标签：鼠标悬停在该点上时要显示的标签。
数据：包含每次比赛得分的数组。
backgroundColor：折线图点的十六进制值或者颜色名称。
borderColor：该行的十六进制值或者颜色名称。
fill：设置为" false"
lineTension：设置为0以创建一条直线。
如果其值大于0，则将具有曲线。radius：为比赛的每个分数绘制的点的半径。
实例化Chart类
我们创建一个可变的图表并实例化Chart类。
我们通过ctx来保存画布和一个数据对象。
数据对象包含类型属性设置为line，数据属性设置为data变量和options属性设置为options。
我们的line.js文件最终代码
$(function(){
//get the line chart canvas
var ctx = $("#line-chartcanvas");
//line chart data
var data = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [
{
label: "TeamA Score",
data: [10, 50, 25, 70, 40],
backgroundColor: "blue",
borderColor: "lightblue",
fill: false,
lineTension: 0,
radius: 5
},
{
label: "TeamB Score",
data: [20, 35, 40, 60, 50],
backgroundColor: "green",
borderColor: "lightgreen",
fill: false,
lineTension: 0,
radius: 5
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Chart class object
var chart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
});
Y轴最小值最大值
如果我们想限制y轴的最小值和最大值，则可以将scales属性添加到选项中并设置yAxes属性。
在以下示例中，我们将y轴的最小值设置为-10，最大值设置为80，并将步长定义为10。
单击此处以获取我的GitHub存储库中的完整代码。
var options = {
scales: {
yAxes: [{
ticks: {
max: 80,
min: -10,
stepSize: 10
}
}]
},
};
