数据可视化 html，可视化数据html模板

欧气 2024年09月26日 22:10 5 0

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义样式 */
    body {
      font-family: Arial, sans-serif;
    }
 .container {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
 .chart {
      width: 100%;
      height: 400px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>数据可视化</h2>
    <div class="chart"></div>
  </div>
  <script>
    // 模拟数据
    var data = [
      { category: 'A', value: 25 },
      { category: 'B', value: 30 },
      { category: 'C', value: 15 },
      { category: 'D', value: 35 },
      { category: 'E', value: 10 }
    ];
    // 绘制图表
    function drawChart() {
      var ctx = document.querySelector('.chart').getContext('2d');
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      var chartData = {
        labels: [],
        datasets: []
      };
      // 提取数据
      data.forEach(function (item) {
        chartData.labels.push(item.category);
      });
      // 计算最大值
      var maxValue = Math.max.apply(null, data.map(function (item) {
        return item.value;
      }));
      // 添加数据集
      chartData.datasets.push({
        label: '数据值',
        data: data.map(function (item) {
          return item.value;
        }),
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      });
      // 绘制图表
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                max: maxValue + 5
              }
            }]
          }
        }
      });
    }
    // 调用函数绘制图表
    drawChart();
  </script>
</body>
</html>

在上述模板中，我们首先定义了一些样式，用于美化页面，我们使用 JavaScript 模拟了一些数据，并使用Chart.js库绘制了一个简单的柱状图。