数据可视化示例，数据可视化案例及代码html

欧气 2024年10月01日 04:41 2 0

本文目录导读：

柱状图可视化案例
折线图可视化案例
饼图可视化案例

《数据可视化案例：HTML实现直观呈现数据之美》

在当今信息爆炸的时代，数据可视化成为了一种强大的工具，能够将复杂的数据以直观、易懂的方式呈现给用户，HTML（超文本标记语言）作为构建网页的基础语言，在数据可视化方面也有着广泛的应用，通过结合HTML与JavaScript、CSS等相关技术，可以创建出各种令人惊叹的数据可视化案例。

柱状图可视化案例

（一）案例描述

假设我们有一组关于不同城市在某个季度的销售额数据，我们希望通过柱状图来清晰地展示各个城市销售额的对比情况。

数据可视化示例，数据可视化案例及代码html

图片来源于网络，如有侵权联系删除

（二）HTML代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>城市销售额柱状图</title>
  <style>
    /* 为柱状图的容器设置样式 */
   .bar - chart {
      width: 500px;
      height: 300px;
      background - color: #f9f9f9;
      border: 1px solid #ccc;
      margin: 0 auto;
      padding: 20px;
    }
    /* 每一个柱子的样式 */
   .bar {
      width: 40px;
      margin - right: 20px;
      background - color: #3498db;
      text - align: center;
      color: white;
      font - family: Arial, sans - serif;
    }
  </style>
</head>
<body>
  <div class="bar - chart">
    <div class="bar" style="height: 100px;">北京：100万</div>
    <div class="bar" style="height: 80px;">上海：80万</div>
    <div class="bar" style="height: 120px;">广州：120万</div>
    <div class="bar" style="height: 90px;">深圳：90万</div>
  </div>
</body>
</html>

在上述代码中，首先我们在HTML文件的头部通过<style>标签定义了样式。.bar - chart类定义了柱状图容器的整体样式，包括大小、背景色、边框和边距等。.bar类则定义了每个柱子的样式，如宽度、背景色、文字颜色和字体等，在<body>部分，我们直接创建了代表不同城市销售额的柱子元素，并通过style属性设置了每个柱子的高度来表示销售额的数值。

虽然这个柱状图非常简单，但它直观地展示了不同城市销售额的对比情况，用户可以一眼看出广州的销售额最高，而上海的销售额相对较低。

折线图可视化案例

（一）案例描述

考虑一个记录某产品在一年中每个月的销量变化情况的数据集，折线图是展示这种随时间变化数据的理想选择。

数据可视化示例，数据可视化案例及代码html

图片来源于网络，如有侵权联系删除

（二）HTML代码实现（借助JavaScript库D3.js部分示例）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>产品月销量折线图</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
   .line - chart {
      width: 600px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 0 auto;
      background - color: #f9f9f9;
    }
  </style>
</head>
<body>
  <div class="line - chart"></div>
  <script>
    // 模拟的月销量数据
    const data = [
      { month: '1月', sales: 50 },
      { month: '2月', sales: 80 },
      { month: '3月', sales: 120 },
      { month: '4月', sales: 90 },
      { month: '5月', sales: 100 },
      { month: '6月', sales: 130 },
      { month: '7月', sales: 110 },
      { month: '8月', sales: 140 },
      { month: '9月', sales: 120 },
      { month: '10月', sales: 150 },
      { month: '11月', sales: 130 },
      { month: '12月', sales: 160 }
    ];
    const margin = { top: 20, right: 20, bottom: 30, left: 50 };
    const width = 600 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;
    const svg = d3.select('.line - chart')
     .append('svg')
     .attr('width', width + margin.left + margin.right)
     .attr('height', height + margin.top + margin.bottom)
     .append('g')
     .attr('transform',translate(${margin.left},${margin.top}));
    const xScale = d3.scaleBand()
     .domain(data.map(d => d.month))
     .range([0, width])
     .padding(0.1);
    const yScale = d3.scaleLinear()
     .domain([0, d3.max(data, d => d.sales)])
     .range([height, 0]);
    svg.append('g')
     .attr('transform',translate(0,${height}))
     .call(d3.axisBottom(xScale));
    svg.append('g')
     .call(d3.axisLeft(yScale));
    const line = d3.line()
     .x(d => xScale(d.month))
     .y(d => yScale(d.sales));
    svg.append('path')
     .datum(data)
     .attr('fill', 'none')
     .attr('stroke', 'steelblue')
     .attr('stroke - width', 2)
     .attr('d', line);
  </script>
</body>
</html>

在HTML文件中引入了D3.js库，这是一个强大的用于数据可视化的JavaScript库，在<script>部分，我们定义了模拟的产品月销量数据，我们通过D3.js的函数来设置坐标轴的尺度（xScale和yScale），分别用于处理月份和销量数据的映射关系，接着创建了坐标轴元素并添加到SVG（可缩放矢量图形）元素中，我们定义了折线的生成函数line，并将数据绑定到<path>元素上绘制出折线。

通过这个折线图，用户可以清晰地观察到产品销量在一年中的波动情况，可以看到销量在某些月份（如12月）达到高峰，而在其他月份（如1月）相对较低，这有助于企业分析销售趋势，以便做出合理的生产和营销策略调整。

饼图可视化案例

（一）案例描述

如果我们想要展示一个公司不同部门的人员占比情况，饼图是一个很好的选择。

数据可视化示例，数据可视化案例及代码html

图片来源于网络，如有侵权联系删除

（二）HTML代码实现（借助Chart.js部分示例）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>公司部门人员占比饼图</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
   .pie - chart {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      background - color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="pie - chart">
    <canvas id="myPieChart"></canvas>
  </div>
  <script>
    const ctx = document.getElementById('myPieChart').getContext('2d');
    const data = {
      labels: ['销售部', '研发部', '市场部', '人事部'],
      datasets: [
        {
          data: [30, 40, 20, 10],
          backgroundColor: ['#3498db', '#2ecc71', '#e74c3c', '#95a5a6'],
          hoverBackgroundColor: ['#2980b9', '#27ae60', '#c0392b', '#7f8c8d']
        }
      ]
    };
    const myPieChart = new Chart(ctx, {
      type: 'pie',
      data: data,
      options: {
        responsive: true
      }
    });
  </script>
</body>
</html>

在这个例子中，我们首先在HTML文件中引入了Chart.js库，在<script>部分，我们定义了饼图的数据，包括部门名称（labels）和各部门人员占比（data），同时还定义了每个扇形的背景色和鼠标悬停时的背景色，我们通过Chart构造函数创建了一个饼图实例，指定了图表的类型为pie，并传入数据和一些配置选项（如设置为响应式）。

这个饼图直观地展示了公司不同部门的人员占比关系，可以清楚地看到研发部的人员占比最大，人事部的人员占比最小，这有助于公司管理层了解人力资源在各个部门的分布情况，以便进行合理的人力资源规划和管理。

通过以上几个数据可视化案例，我们可以看到HTML在结合相关的JavaScript库（如D3.js和Chart.js）时，能够创建出各种类型的有效数据可视化图表，这些可视化成果不仅能够帮助用户更好地理解数据，还能为决策提供有力的支持，无论是展示不同城市的销售额对比、产品销量的时间变化趋势还是公司部门人员占比情况，数据可视化都以一种简洁而直观的方式传达了数据背后的信息，随着数据量的不断增长和对数据分析需求的增加，HTML为基础的数据可视化技术将在更多领域发挥重要作用，开发人员也可以不断探索和创新，利用HTML的灵活性和可扩展性，创建出更加复杂、美观和实用的数据可视化作品。

标签： #数据可视化 #示例 #案例