Chart.js 散点图学习笔记
简介
Chart.js是一个用于在HTML5上绘制交互式图表的JavaScript库，它可以用来绘制各种类型的图表，包括散点图。
散点图的用途
散点图是一种二维坐标图，在其中，每个数据点被表示为独立的点，没有任何连接线。散点图通常用于显示数据之间的关系或趋势，比如在制造业中使用它来跟踪过程控制、产品质量等。
示例
这里是一个简单的示例，展示了如何使用Chart.js绘制一个散点图。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Chart.js 散点图示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
</script>
</html>
上面的代码会在canvas标签中绘制一个简单的散点图。其中，我们定义了一个数据集，包含三个数据点，每个数据点都有一个x坐标和一个y坐标。
通过使用Chart.js提供的选项，我们可以控制散点图的样式，如标题、坐标轴、数据点样式等等。这些选项可以在上面的options对象中设置。
结论
使用Chart.js绘制散点图非常简单，只需要一些基本的JavaScript知识和一些图表设计的经验。在选择绘制类型和设置选项方面，请参考Chart.js官方文档以获得更多详细信息。