FoundationOfSmartIrrigation/Test01.html at main · irripro/FoundationOfSmartIrrigation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管道平面布置图</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
   <!-- 引入 Chart.js UMD 版本 -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.js" crossorigin="anonymous"></script>

</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
// 假设这是你的节点坐标数组 (x, y, q)
const nodes = [
  { x: 10, y: 20, q: 5 },
  { x: 30, y: 40, q: 10 },
  { x: 40, y: 10, q: 10 },
  { x: 50, y: 30, q: 10 },
  // 添加更多点...
];

// 创建一个新的图表实例
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        label: '原始点',
        data: nodes.map(point => ({ x: point.x, y: point.y })),
        borderColor: 'blue',
        fill: false,
        showLine: false, // 不显示连接线
        pointRadius: 5, // 点的半径
        pointBackgroundColor: 'blue'
      },
      {
        label: '偏移点',
        data: nodes.map(point => ({ x: point.x + 0.5, y: point.y + 1 })),
        borderColor: 'red',
        fill: false,
        showLine: false, // 不显示连接线
        pointRadius: 5, // 点的半径
        pointBackgroundColor: 'red'
      },
      {
        label: '出流',
        data: nodes.flatMap((point, index) => [
          { x: point.x, y: point.y },
          { x: point.x + 0.5, y: point.y + 1 },
        //   null // 使用 null 来断开线条
        ]),
        borderColor: 'gray',
        fill: false,
        showLine: true,
        pointRadius: 0, // 不显示点
        borderWidth: 2
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      },
      y: {
        type: 'linear',
        position: 'left'
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            const dataIndex = context.dataIndex;
            if (dataIndex % 3 === 0) {
              const point = nodes[dataIndex / 3];
              return `x: ${point.x}, y: ${point.y}, 出流 q (m³/h): ${point.q}`;
            } else if (dataIndex % 3 === 1) {
              const point = nodes[Math.floor(dataIndex / 3)];
              return `x: ${point.x + 1}, y: ${point.y + 1}, 出流 q (m³/h): ${point.q}`;
            }
            return '';
          }
        }
      }
    }
  }
});
</script>
</body>
</html>