rui.jiang
/
performance-test


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!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>