rui.jiang
/
performance-test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2D Scatter Plot with Time-based Colorbar</title>
    <!-- 引入 Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    <div id="plotly-chart"></div>

    <script>
      // 示例数据
      const colorbarData = [
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-03",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-04",
        "2023-06",
        "2023-06",
      ];

      const xData = [
        4.2, 5.2, 4.04, 3.91, 3.69, 3.73, 4.31, 3.99, 3.75, 3.77, 3.49, 3.18,
        2.77, 3, 3.52, 3.23, 3.09, 3.39,
      ];

      const yData = [
        310.18, 391.66, 286.01, 242.07, 244.45, 250.31, 302.12, 240.6, 251.22,
        215.52, 135.86, 75.99, 10.25, 100.25, 310.25, 410.25, 190.25, 210.25,
      ];

      // 映射时间到数值：2023-03 -> 1, 2023-04 -> 2, 2023-06 -> 3
      const timeMapping = {
        "2023-03": 1,
        "2023-04": 2,
        "2023-06": 3,
      };

      // 将时间字符串映射为数字
      const colorValues = colorbarData.map((date) => timeMapping[date]);

      // 配置散点图的数据
      const trace = {
        x: xData, // 风速数据
        y: yData, // 有功功率数据
        mode: "markers", // 选择散点图
        type: "scatter", // 散点图
        text: colorbarData, // 鼠标悬停时显示的文本（时间）
        hovertemplate:
          "<b>时间: %{text}</b><br>" +
          "风速: %{x} m/s<br>" +
          "功率: %{y} kW<extra></extra>", // 鼠标悬停时显示的内容
        marker: {
          color: colorValues, // 使用数字化的时间数据来映射颜色
          colorscale: "Viridis", // 颜色渐变
          colorbar: {
            title: "年月", // 色条标题
            tickvals: [1, 2, 3], // 设置 colorbar 上的刻度
            ticktext: ["2023-03", "2023-04", "2023-06"], // 设置刻度对应的时间标签
          },
          size: 10, // 设置散点的大小
        },
      };
      // "风速: %{x}(m/s)<br>" +
      //       "有功功率: %{y}（kw）<br>" +
      //       "时间: %{marker.color:.2f}<extra></extra>", // 鼠标悬停时显示的内容
      // 配置布局
      const layout = {
        title: "风速与有功功率的散点图",
        xaxis: {
          title: "风速 (m/s)", // X轴标题
        },
        yaxis: {
          title: "有功功率 (kW)", // Y轴标题
        },
      };

      // 绘制图表
      Plotly.newPlot("plotly-chart", [trace], layout);
    </script>
  </body>
</html>