|
|
@@ -1,85 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
- <title>3D Scatter Plot</title>
|
|
|
- <!-- 使用备用 CDN 加载 Plotly.js -->
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="plotly-3d-chart" style="width: 100%; height: 600px"></div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 原始数据
|
|
|
- const xData = [5.1, 4.9, 4.7, 4.6, 5.0, 5.4, 4.6, 5.0, 4.4, 4.9]; // sepal_length
|
|
|
- const yData = [3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1]; // sepal_width
|
|
|
- const zData = [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.2]; // petal_width
|
|
|
- const species = [
|
|
|
- "setosa",
|
|
|
- "setosa",
|
|
|
- "setosa",
|
|
|
- "setosa",
|
|
|
- "setosa",
|
|
|
- "versicolor",
|
|
|
- "versicolor",
|
|
|
- "versicolor",
|
|
|
- "virginica",
|
|
|
- "virginica",
|
|
|
- ];
|
|
|
-
|
|
|
- // 创建 trace 数组
|
|
|
- const data = [
|
|
|
- {
|
|
|
- type: "scatter3d",
|
|
|
- mode: "markers",
|
|
|
- x: xData.slice(0, 5), // Setosa
|
|
|
- y: yData.slice(0, 5),
|
|
|
- z: zData.slice(0, 5),
|
|
|
- marker: {
|
|
|
- color: ["red", "red", "red", "red", "red"], // 为 Setosa 设置颜色
|
|
|
- size: 10,
|
|
|
- },
|
|
|
- name: "Setosa", // 图例中的名称
|
|
|
- },
|
|
|
- {
|
|
|
- type: "scatter3d",
|
|
|
- mode: "markers",
|
|
|
- x: xData.slice(5, 8), // Versicolor
|
|
|
- y: yData.slice(5, 8),
|
|
|
- z: zData.slice(5, 8),
|
|
|
- marker: {
|
|
|
- color: ["green", "green", "green"], // 为 Versicolor 设置颜色
|
|
|
- size: 10,
|
|
|
- },
|
|
|
- name: "Versicolor", // 图例中的名称
|
|
|
- },
|
|
|
- {
|
|
|
- type: "scatter3d",
|
|
|
- mode: "markers",
|
|
|
- x: xData.slice(8), // Virginica
|
|
|
- y: yData.slice(8),
|
|
|
- z: zData.slice(8),
|
|
|
- marker: {
|
|
|
- color: ["blue", "blue"], // 为 Virginica 设置颜色
|
|
|
- size: 10,
|
|
|
- },
|
|
|
- name: "Virginica", // 图例中的名称
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const layout = {
|
|
|
- title: "3D Scatter Plot of Iris Dataset",
|
|
|
- scene: {
|
|
|
- xaxis: { title: "Sepal Length" },
|
|
|
- yaxis: { title: "Sepal Width" },
|
|
|
- zaxis: { title: "Petal Width" },
|
|
|
- },
|
|
|
- showlegend: true, // 显示图例
|
|
|
- };
|
|
|
-
|
|
|
- // 使用 Plotly 绘制图表
|
|
|
- Plotly.newPlot("plotly-3d-chart", data, layout);
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
liujiejie