Chart.js 条形图

2025年5月17日 | 8 分钟阅读

Chart.js 柱状图显示由垂直条表示的数据集。柱状图用于使用柱子比较多个数据集。在本文中，我们将学习如何制作柱状图以及如何配置用户。

语法

使用“bar”图表类型。JS 图表。柱状图的语法如下

柱状图的例子

以下示例显示了一个柱状图及其设置。

示例 1

以下示例显示了基本的柱状图。基本柱状图及其 UI 根据元素和数据显示。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with bar graph </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

示例 2

该示例显示了柱状图的基本柱宽和背景颜色。我们可以为每个图的元素设置不同的颜色。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with bar graph </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderWidth: 5,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

示例 3

该示例显示了柱状图的基本边框宽度、背景颜色和边框颜色。我们可以为元素设置不同的背景和边框颜色。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with bar graph </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 5,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

示例 4

该示例显示了带有 y 轴刻度的基本柱状图。我们可以为图表设置最大和最小刻度。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with bar graph </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: 'aqua',
borderWidth: 5,
}],
},
options: {
responsive: false,
scales: {
        y: {
          min: 0,
          max: 60,
        }
      }
},
});
</script>
</body>
</html>

输出

输出显示了基本的柱状图。

水平柱状图

垂直柱状图的替代方案是水平柱状图。趋势数据和几个数据集的并排比较有时使用它来显示。您必须将 options 对象的 indexAxis 属性设置为“y”才能实现此目的。由于“x”是此属性的默认值，因此将显示垂直条。

语法

以下语法显示了水平柱状图。

 
const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
  }
};   

水平柱状图的配置选项

水平柱状图可以使用与柱状图相同的参数进行配置。另一方面，在水平柱状图中，y 轴受 x 轴上提供的所有选项的约束。

示例

该示例显示了带有 y 轴刻度和网格的基本柱状图。我们可以使用“OFF”值设置刻度的网格和水平元素。每个数据集元素都显示从左到右的条。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js bar graph with horizontal direction </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}],
},
options: {
responsive: false,
indexAxis: 'y',
scales: {
        y: {
            grid: {
              offset: true
            }
        }
    }
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

条形和边框样式

以下属性显示了它们的详细信息及其用途

名称	描述
backgroundColor	设置为背景颜色。
borderColor	设置为边框颜色。
borderSkipped	设置为要跳过的条的边缘。
borderWidth	设置为边框宽度（以像素为单位）。
borderRadius	设置为边框半径（以像素为单位）。
minBarLength	设置此选项以确保条的最小长度（以像素为单位）。

borderSkipped
此选项禁用边框半径或阻止在填充的底部绘制条笔划。除非您正在制作基于柱状图的图表类型，否则无需更改此设置。
borderWidth
如果此值为数字，则它适用于矩形的左、上、右和下边，但 borderSkipped 除外。如果此值为对象，则 left 属性指定左边框的宽度。同样，也可以指定顶部、底部和右侧的特征。跳过 BorderSkipped 和已删除的边框。
边框的半径
如果此值为数字，则它应用于矩形的左上角、右上角、左下角和右下角，但不包括那些接触 borderSkipped 的角。如果此值为对象，则 top-left 属性指定左上角的边框半径。
可以提供 topRight、bottomLeft 和 bottomRight 特性。跳过省略的或接触边框的角。例如，如果删除顶部边框，则还将跳过角顶部和 topRight 的边框半径。

示例

该示例显示了带有水平轴上的 y 轴刻度的基本柱状图。我们可以分别设置每个元素的条形 UI。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js bar graph with bar UI </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
barPercentage:2,
barThickness:30,
borderRadius: 24,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

条形元素的悬停效果

悬停效果用于在图表图形上添加悬停事件后设置样式。与每个元素的交互使用以下属性显示 UI 和样式。

名称	描述
hoverBackgroundColor	设置为悬停时条的背景颜色。
hoverBorderColor	设置为悬停时条的边框颜色。
hoverBorderWidth	设置为悬停时条的边框宽度（以像素为单位）。
hoverBorderRadius	设置为悬停时条的边框半径（以像素为单位）。

示例

该示例显示了带有垂直轴和悬停效果的基本柱状图。我们可以分别为元素设置带有悬停事件的条形 UI。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js bar graph with bar UI </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
barPercentage:2,
barThickness:30,
borderRadius: 24,
hoverBackgroundColor:"white",
hoverBorderColor:"black",
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了基本的柱状图。

结论

柱状图用于显示图中每个数据集的条。我们可以看到单个图表中多个元素之间的过程和差异。柱状图设置样式、UI 以及与鼠标事件的交互。

下一个主题Chartjs-气泡图

Chart.js 条形图

柱状图的例子

水平柱状图

语法

水平柱状图的配置选项

条形和边框样式

示例

条形元素的悬停效果

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 条形图

柱状图的例子

水平柱状图

语法

水平柱状图的配置选项

条形和边框样式

示例

条形元素的悬停效果

结论

相关帖子

如何在 ChartJS 中动态更新值

Chart.js 常见问题

Chart.js 基础和插件开发者

Chart.js 标题

Chart.js 通用数据结构

Chart.js 基础概念

Chart.js 气泡图

Chart.js UI 颜色

Chart.js 选项和内边距

Chart.js 混合类型图表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器