如何使用ChartJS创建多色条形图
时间：2020-02-23 14:45:51 来源:igfitidea点击:
在本教程中，我们将学习使用ChartJS和一些静态数据绘制多色条形图。
在上一教程中，我们介绍了如何使用静态数据绘制条形图。
在本教程中，我们将为条形图使用不同的颜色。
项目结构
我们将从以下项目结构开始。
现在，在css文件夹中，我们将创建一个default.css文件。
在js文件夹中，我们将创建一个bar-multicolor.js文件。
在项目文件夹中，我们将创建一个bar-multicolor.html文件。
bar-multicolor.html
在head内部，我们包含了default.css文件，该文件将为图形设置样式。
在body内部，我们有一个canvas元素，其ID为bar-chartcanvas。
我们将在此画布内绘制条形图。
在文件末尾的body标记之前，我们包括jquery.min.js，Chart.min.js和bar-multicolor.js javascript文件。
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Multicolor Bar graph</title>
<link href="css/default.css" rel="stylesheet">
</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-multicolor.js"></script>
</body>
</html>
default.css
该文件包含一些样式规则以对图表进行样式设置。
.chart-container {
width: 80%;
height: 480px;
margin: 0 auto;
}
bar-multicolor.js
在此文件中，我们具有使用ChartJS和静态数据创建条形图的逻辑。
在此示例中，我们有5场比赛的两个团队TeamA得分和TeamB得分，分别是match1，match2，... match5。
对于不同的颜色，我们将backgroundColor属性设置为颜色数组。
$(document).ready(function () {
var ctx = $("#bar-chartcanvas");
var data = {
labels : ["match1", "match2", "match3", "match4", "match5"],
datasets : [
{
label : "TeamA score",
data : [10, 50, 25, 70, 40],
backgroundColor : [
"red", "green", "blue", "purple", "magenta"
],
borderColor : [
"#111", "#111", "#111", "#111", "#111"
],
borderWidth : 1
},
{
label : "TeamB score",
data : [20, 35, 40, 60, 50],
backgroundColor : [
"aqua", "salmon", "darkgray", "pink", "coral"
],
borderColor : [
"#111", "#111", "#111", "#111", "#111"
],
borderWidth : 1
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "Bar Graph",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : false
},
scales : {
yAxes : [{
ticks : {
min : 0
}
}]
}
};
var chart = new Chart( ctx, {
type : "bar",
data : data,
options : options
});
});
随机多色条形图
为了在每次加载页面时获得随机的多色条形图，我们使用了getRandomColorHex()函数。
此函数以十六进制形式返回颜色，例如#0011AA。
$(document).ready(function () {
var ctx = $("#bar-chartcanvas");
var data = {
labels : ["match1", "match2", "match3", "match4", "match5"],
datasets : [
{
label : "TeamA score",
data : [10, 50, 25, 70, 40],
backgroundColor : [
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex()
],
borderColor : [
"#111",
"#111",
"#111",
"#111",
"#111"
],
borderWidth : 1
},
{
label : "TeamB score",
data : [20, 35, 40, 60, 50],
backgroundColor : [
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex(),
getRandomColorHex()
],
borderColor : [
"#111",
"#111",
"#111",
"#111",
"#111"
],
borderWidth : 1
}
]
};
var options = {
title : {
display : true,
position : "top",
text : "Random Multicolor Bar Graph",
fontSize : 18,
fontColor : "#111"
},
legend : {
display : false
},
scales : {
yAxes : [{
ticks : {
min : 0
}
}]
}
};
var chart = new Chart( ctx, {
type : "bar",
data : data,
options : options
});
/**
* function to generate random color in hex form
*/
function getRandomColorHex() {
var hex = "0123456789ABCDEF",
color = "#";
for (var i = 1; i <= 6; i++) {
color += hex[Math.floor(Math.random() * 16)];
}
return color;
}
});
