Chart.js 散点图

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

散点图同时显示数据的两个维度。前两个维度（x 和 y）表示各自的水平轴和垂直轴，以确定散点的位置。

语法

以下语法显示使用 chart.js 语言的散点图类型。

 
const config = {
type: 'scatter',
data: graph data,
options: {}
};   

以下语法显示散点图的数据集。需要 x 轴和 y 轴来设置特定标签的数据。多个标签需要多个轴的协调才能绘制散点图。

 
data: {
labels: ["CHART.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: number,
y: number
}],
}],
}   

散点图的示例

以下示例显示了一个散点图及其设置。

示例 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 basic chart with scatter graph </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>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'scatter',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21
},
{
x: 25,
y: 25
},
{
x: 23,
y: 11
},
{
x: 30,
y: 18
},
{
x: 31,
y: 28
},
{
x: 27,
y: 45
}
],

}],
},
options: {
responsive: false,
scales: {
x: {
type: 'linear',
position: 'bottom,'
}
}
},
});
</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 scatter graph </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.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'scatter',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21
},
{
x: 25,
y: 25
},
{
x: 23,
y: 11
},
{
x: 30,
y: 18
},
{
x: 31,
y: 28
},
{
x: 27,
y: 45
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
radius: 6,

}],
},
options: {
responsive: false,
scales: {
x: {
type: 'linear',
position: 'bottom,'
}
}
},
});
</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 scatter graph </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.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'scatter',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21
},
{
x: 25,
y: 25
},
{
x: 23,
y: 11
},
{
x: 30,
y: 18
},
{
x: 31,
y: 28
},
{
x: 27,
y: 45
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black', 'navy', 'red', 'green', 'grey', 'blue'],
radius: 8,
borderWidth:3,
}],
},
options: {
responsive: false,
scales: {
x: {
type: 'linear',
position: 'bottom,'
}
}
},
});
</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 basic chart with scatter graph </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>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'scatter',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21
},
{
x: 25,
y: 25
},
{
x: 23,
y: 11
},
{
x: 30,
y: 18
},
{
x: 31,
y: 28
},
{
x: 27,
y: 45
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black', 'navy', 'red', 'green', 'grey', 'blue'],
radius: 8,
borderWidth:3,
pointStyle: ['triangle', 'rect', 'star', 'rectRounded', 'triangle', 'rectRot'],
hoverBackgroundColor: ['white'],
hoverBorderColor: ['black'],
hoverBorderWidth: 6,
hoverRadius: 10,
}],
},
options: {
responsive: false,
scales: {
x: {
type: 'linear',
position: 'bottom,'
}
}
},
});
</script>
</body>
</html>   

输出

输出显示了基本的散点图。

示例 5

该示例显示了具有边框和背景颜色的基本散点图。散点图显示了不同元素的不同颜色，并设置了边框宽度。

 
<!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 scatter graph </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>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'scatter',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [{
x: 25,
y: 21
},
{
x: 25,
y: 25
},
{
x: 23,
y: 11
},
{
x: 30,
y: 18
},
{
x: 31,
y: 28
},
{
x: 27,
y: 45
}
],
backgroundColor: ['orange', 'aqua', 'pink', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['black', 'navy', 'red', 'green', 'grey', 'blue'],
radius: 8,
borderWidth:3,
pointStyle: ['triangle', 'rect', 'star', 'rectRounded', 'triangle', 'rectRot'],
}],
},
options: {
responsive: false,
scales: {
x: {
type: 'linear',
position: 'bottom,'
}
}
},
});
</script>
</body>
</html>   

输出

输出显示了基本的散点图。

结论

散点图以图形的点格式显示不同的元素。

下一个主题Chartjs-subtitle

← 上一个下一个 →

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 教程

Chart.js 条形图

Chart.js 极地区域图

Chart.js API 开发者

Chart.js UI 颜色

Chart.js 混合类型图表

Chart.js 动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器