极客教程如何使用CanvasJS实现散点图和气泡图
在本文中，我们将学习如何使用Canvas JS插件创建动态散点图和气泡图。
散点图： 一种图表，用于观察整体数据中两个数值变量之间的关系以发现一些模式。它使用点来表示水平和垂直轴上的2个变量的值。
气泡图： 除了添加了第三个变量来显示数据或气泡的大小之外，它与散点图非常相似。两个变量用于表示X轴和Y轴的位置，而第三个变量（Z）确定其大小。
语法：
new CanvasJS.Chart($("#ID"), {
data: [{
type: "scatter",
dataPoints: [
{...},
]
}]
});
备注： 在使用Canvas JS实现气泡图时，将 类型 属性更改为“bubble”。
方法：
- 在HTML设计中，使用
<div>标签来显示 散点 或 气泡 图表。 - 在代码的脚本部分，通过设置库的类型、数据、数据点和其他选项属性来实例化CanvasJS对象。
- 在代码的头部部分包含CDN链接，以使用插件的功能。
- 使用Canvas JS插件的render()方法渲染图表。
- 根据所给出的示例代码中的样式需求，设置其他属性或属性以进行图表的样式化。
- 根据可用于代码实现的数据制作图表。
CDN链接：
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
示例1： 此代码演示了使用Canvas JS插件显示不同车型的里程与重量图表的简单散点图。初始数据在dataPoints中获取，在代码的脚本部分中在Canvas JS对象实例化时使用。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS Scatter Chart </h3>
</div>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title: {
text: "Mileage vs Weight"
},
axisX: {
title: "Weight",
suffix: " kg"
},
axisY: {
title: "Mileage",
suffix: " MPG"
},
data: [{
type: "scatter",
animationDuration: 2000,
animationEnabled: "true",
markerType: "square",
markerSize: 10,
markerBorderColor: "blue",
markerBorderThickness: 4,
markerColor: "green",
toolTipContent:
"Car: {label} <br> Mileage: {y} MPG<br>Weight: {x} kg",
dataPoints: [
{ label: "Mazda RX4", x: 2620, y: 21.0 },
{ label: "Mazda RX4 Wag", x: 2875, y: 24.0 },
{ label: "Mazda axela", x: 2222, y: 29.0 },
{ label: "Mazda3 hatchback", x: 2000, y: 30.1 },
{ label: "Datsun 710", x: 2320, y: 22.8 },
{ label: "Mazda Sedan", x: 2520, y: 20.8 },
{ label: "CX 5", x: 1989, y: 16.8 },
{ label: "Hornet 4 Drive", x: 3210, y: 1.4 },
{ label: "Hornet Sportabout", x: 2140, y: 18.7 },
{ label: "Valiant", x: 3460, y: 18.1 },
{ label: "Plymouth Valiant", x: 2460, y: 18.5 },
{ label: "Ford Cortina", x: 3560, y: 21.1 },
{ label: "Cortina MK3", x: 2999, y: 25.1 },
{ label: "Ford Consul", x: 3170, y: 28.1 },
{ label: "Cortina estate", x: 3460, y: 15.9 },
{ label: "Chrysler Valiant", x: 1960, y: 17.9 },
{ label: "New Mazda", x: 2960, y: 19.9 }
]// end dataPoints
}]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
结果：
示例2： 以下代码展示了汽车的里程与重量之间的气泡图，以及表达销售规模的第三个参数，以气泡或圆形点的形式。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS bubble Chart </h3>
</div>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title: {
text: "Mileage vs Weight and Sales"
},
axisX: {
title: "Weight",
suffix: " kg"
},
axisY: {
title: "Mileage",
suffix: " MPG"
},
data: [{
type: "bubble",
animationDuration: 1000,
animationEnabled: "true",
markerColor: "green",
toolTipContent:
"Car: {label} <br> Mileage: {y} MPG<br>Weight: {x} kg<br><b>Sales</b> : ${z}k",
dataPoints: [
{ label: "Mazda RX4", x: 2620, y: 21.0, z: 250 },
{ label: "Mazda RX4 Wag", x: 2875, y: 24.0, z: 150 },
{ label: "Mazda axela", x: 2222, y: 29.0, z: 90 },
{ label: "Mazda3 hatchback", x: 2300, y: 30.1, z: 187 },
{ label: "Datsun 710", x: 2320, y: 22.8, z: 200 },
{ label: "Mazda Sedan", x: 2520, y: 20.8, z: 146 },
{ label: "CX 5", x: 2398, y: 17.8, z: 160 },
{ label: "Hornet 4 Drive", x: 3210, y: 21.4, z: 267 },
{ label: "Hornet Sportabout", x: 2278, y: 18.7, z: 134 },
{ label: "Valiant", x: 3500, y: 28.1, z: 200 },
{ label: "Plymouth Valiant", x: 2460, y: 18.5, z: 100 },
{ label: "Ford Cortina", x: 3360, y: 21.1, z: 120 },
{ label: "Cortina MK3", x: 2999, y: 25.1, z: 240 },
{ label: "Ford Consul", x: 3170, y: 28.1, z: 199 },
{ label: "Cortina estate", x: 3460, y: 18.9, z: 270 },
{ label: "Chrysler Valiant", x: 2816, y: 17.9, z: 210 },
{ label: "New Mazda", x: 2960, y: 19.9, z: 165 }
]//end DataPoints
}]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
输出：
结论： 无论何时我们需要展示两个数值变量之间的关系时，我们使用散点图，而在需要添加第三个参数以确定数据点或数值变量在x轴和y轴上的大小时，则使用气泡图。它们都是交互式图表，在整体数据上展示了一种特定的模式。