JavaScript特效，服务器载荷图特效（可做网站动态背景）

本文链接：https://blog.youkuaiyun.com/m0_73135216/article/details/135728053

本文介绍了如何使用HTML、CSS和JavaScript，配合Chart.js库创建一个实时更新的服务器负载监控界面，展示了CPU、内存、磁盘和网络使用情况的图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任务一效果图

任务二源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #ecf0f1;
    }

    .chart-panel {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 80%;
    }

    .chart-container {
      width: 300px;
      margin: 20px;
    }
  </style>
  <title>Server Load Dashboard</title>
</head>
<body>
  <div class="chart-panel">
    <div class="chart-container">
      <canvas id="cpuChart" width="300" height="150"></canvas>
    </div>

    <div class="chart-container">
      <canvas id="memoryChart" width="300" height="150"></canvas>
    </div>

    <div class="chart-container">
      <canvas id="diskChart" width="300" height="150"></canvas>
    </div>

    <div class="chart-container">
      <canvas id="networkChart" width="300" height="150"></canvas>
    </div>

    <div class="chart-container">
      <canvas id="chart5" width="300" height="150"></canvas>
    </div>

    <div class="chart-container">
      <canvas id="chart6" width="300" height="150"></canvas>
    </div>
  </div>

  <script>
    const chartConfigurations = [
      { id: 'cpuChart', label: 'CPU Load' },
      { id: 'memoryChart', label: 'Memory Usage' },
      { id: 'diskChart', label: 'Disk Usage' },
      { id: 'networkChart', label: 'Network Usage' },
      { id: 'chart5', label: 'Chart 5' },
      { id: 'chart6', label: 'Chart 6' },
    ];

    const charts = createCharts(chartConfigurations);

    let counters = Array(charts.length).fill(0); // Counters to track data updates for each chart

    // Update charts with random data
    setInterval(() => {
      counters.forEach((counter, index) => {
        const newDataPoint = Math.floor(Math.random() * 100);
        updateChartData(charts[index], newDataPoint, counter);
        counters[index] = (counter + 1) % 10; // Ensure counter stays within the range [0, 9]
      });
    }, 1000);

    // Function to create an array of charts
    function createCharts(configurations) {
      return configurations.map(config => {
        const borderColor = getRandomColor();
        const backgroundColor = `${borderColor}22`; // Add alpha for fill
        const ctx = document.getElementById(config.id).getContext('2d');
        return new Chart(ctx, {
          type: 'line',
          data: { labels: Array.from({ length: 10 }, (_, i) => i + 1), datasets: [{ label: config.label, borderColor, borderWidth: 2, backgroundColor, fill: true, data: Array(10).fill(0) }] },
          options: {
            responsive: true,
            scales: {
              x: { type: 'linear', position: 'bottom' },
              y: { beginAtZero: true },
            },
          },
        });
      });
    }

    // Function to update chart data
    function updateChartData(chart, newDataPoint, counter) {
      const data = chart.data.datasets[0].data;
      data[counter] = newDataPoint;
      chart.update();
    }

    // Function to generate a random color
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  </script>
</body>
</html>