Chart.js 混合类型图表

2025年5月18日 | 5 分钟阅读

Chart.js 中的混合图表是将两种图表结合在一起。混合图表用于比较多个图表。混合图表包含多种图表类型。本文将向您介绍如何制作和设置混合图表。

Chart.js 混合图表类型是一种统一的图形表示，它结合了几种图表类型。雷达图、甜甜圈图、条形图和折线图是一些图表的示例。

注意：在制作混合图形时，我们为每个数据集选择图表类型。

语法

使用两个数据集图表。以下是混合图表类型的语法

 
new Chart(document.getElementById("chartIDs"), {
type: 'bar', // primary chart type
data: {
labels: ['Label_1', 'Label_2', 'Label_3'],
datasets: [{
type: 'line', // specifying a different chart type: primary chart
data: [value_1, value_2, value_3],
// extra line chart configurations
}, {
type: 'bar', // second chart type
data: [value_4, value_5, value_6],
// extra	 bar chart configurations
}]
},
options: {
//Set chart options
}
});   

绘制顺序

数据集自然地排列，以便第一个数据集显示在顶部。数据集的“order”选项（默认设置为 0）可用于调整此顺序。

混合图表的示例

以下示例演示了混合图表及其设置。

示例 1

该示例显示了两种散点图和极坐标图类型的图表。

 
<!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 mixed type chart with scatter and polarArea </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: 'scatter',
data: {
labels: ["NodeJS", "ReactJS", "JAVASCRIPT", "CHART.JS", "NextJs", "TypeScript"],
datasets: [{
type: 'scatter',
label: "online tutorial subjects",
data: [{
x: 15,
y: 14
},
{
x: 20,
y: 30
},
{
x: 31,
y: 20
},
{
x: 25,
y: 28
},
{
x: 10,
y: 10
},
{
x: 15,
y: 30
}
],
backgroundColor: ['yellow', 'aqua', 'gold', 'pink', 'lightgreen', 'lightblue'],
borderColor: ['black'],
radius: 8,
},
{
type: 'polarArea',
label: "online tutorial exam",
data: [10, 30, 40, 50, 60, 80],
backgroundColor: ['pink', 'lightgreen', 'navy', 'aqua', 'lightblue', 'gold'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 5,
}
],
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
},
});

</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 mixed type chart with bar and line </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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, {
data: {
datasets: [{
type: 'bar',
label: "online tutorial subjects",
data: [10, 30, 30, 55, 62, 70],
backgroundColor: ['yellow', 'aqua', 'gold', 'pink', 'lightgreen', 'lightblue'],
borderColor: ['black'],
}, {
type: 'line',
label: "online tutorial exam",
data: [20, 32, 40, 65, 68, 80],
backgroundColor: ['pink', 'lightgreen', 'navy', 'aqua', 'lightblue', 'gold'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 5,
}],
labels: ["NodeJS", "ReactJS", "JAVASCRIPT", "CHART.JS", "NextJs", "TypeScript"],
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
},
});

</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 mixed type chart with polarArea and radar graphs </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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, {
data: {
datasets: [{
type: 'polarArea',
label: "online tutorial subjects",
data: [70, 40, 80, 55, 62, 70],
backgroundColor: ['yellow', 'aqua', 'gold', 'pink', 'lightgreen', 'lightblue'],
borderColor: ['black'],
}, {
type: 'radar',
label: "online tutorial exam",
data: [160, 72, 100, 165, 168, 180],
backgroundColor: ['pink', 'lightgreen', 'navy', 'aqua', 'lightblue', 'gold'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 5,
}],
labels: ["NodeJS", "ReactJS", "JAVASCRIPT", "CHART.JS", "NextJs", "TypeScript"],
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
},
});
</script>
</body>
</html>   

输出

输出显示具有混合类型的图表。

示例 4

该示例显示了雷达图和折线图类型的图表。

 
<!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 mixed type with Radar and line chart </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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, {
data: {
datasets: [{
type: 'radar',
label: "online tutorial subjects",
data: [10, 30, 30, 55, 62, 70],
backgroundColor: ['yellow', 'aqua', 'gold', 'pink', 'lightgreen', 'lightblue'],
borderColor: ['black'],
}, {
type: 'line',
label: "online tutorial exam",
data: [20, 32, 40, 65, 68, 80],
backgroundColor: ['pink', 'lightgreen', 'navy', 'aqua', 'lightblue', 'gold'],
borderColor: ['black'],
borderWidth: 2,
pointRadius: 5,
}],
labels: ["NodeJS", "ReactJS", "JAVASCRIPT", "CHART.JS", "NextJs", "TypeScript"],
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
},
});
</script>
</body>
</html>   

输出

输出显示具有混合类型的图表。

结论

我们可以在同一网页中设置具有不同值的不同图形。我们可以设置不同的图表来比较值。

下一主题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 混合类型图表

注意：在制作混合图形时，我们为每个数据集选择图表类型。

语法

混合图表的示例

结论

相关帖子

Chart.js 选项和内边距

如何在 Chart.js 中自定义图例

Chart.js 数据抽稀配置

Chart.js UI 颜色

如何在 ChartJS 中动态更新值

Chart.js 饼图

Chart.js 教程

Chart.js 安装和工作流程

Chart.js 字体配置

Chart.js 散点图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器