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

欧气 2024年09月27日 04:38 2 0

数据可视化案例及代码 HTML

一、引言

数据可视化是将数据以图形、图表等直观的形式展示出来，以便更好地理解和分析数据，在当今数字化时代，数据可视化已经成为了数据分析和决策的重要工具之一，本文将介绍一个数据可视化案例，并提供相应的代码 HTML。

二、案例介绍

本案例的数据是来自于一个电商平台的销售数据，包括商品类别、销售额、销售量等信息，我们的目标是通过数据可视化的方式，展示出不同商品类别之间的销售情况，以及销售额和销售量的变化趋势。

三、数据可视化工具

在本案例中，我们使用了 D3.js 库来实现数据可视化，D3.js 是一个基于 JavaScript 的数据可视化库，它提供了丰富的图表类型和交互功能，可以方便地实现各种数据可视化需求。

四、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据可视化案例</title>
  <style>
    /* 样式表 */
  </style>
</head>
<body>
  <!-- 数据可视化容器 -->
  <div id="my-chart"></div>
  <!-- 引入 D3.js 库 -->
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // 数据
    var data = [
      { category: "电子产品", sales: 5000, quantity: 100 },
      { category: "服装", sales: 3000, quantity: 50 },
      { category: "食品", sales: 2000, quantity: 80 },
      { category: "家居用品", sales: 4000, quantity: 60 },
      { category: "图书", sales: 1000, quantity: 20 }
    ];
    // 颜色映射
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    // 图表宽度和高度
    var width = 600;
    var height = 400;
    // 侧边栏宽度
    var sidebarWidth = 200;
    // 创建 svg 元素
    var svg = d3.select("#my-chart")
     .append("svg")
     .attr("width", width)
     .attr("height", height);
    // 创建侧边栏 svg 元素
    var sidebarSvg = d3.select("#my-chart")
     .append("svg")
     .attr("width", sidebarWidth)
     .attr("height", height);
    // 绘制柱状图
    var barWidth = width / data.length - 10;
    var x = d3.scaleBand()
     .domain(data.map(function (d) {
        return d.category;
      }))
     .range([0, width - sidebarWidth])
     .padding(0.1);
    var y = d3.scaleLinear()
     .domain([0, d3.max(data, function (d) {
        return d.sales;
      })])
     .range([height - 10, 0]);
    svg.selectAll(".bar")
     .data(data)
     .enter()
     .append("rect")
     .attr("class", "bar")
     .attr("x", function (d) {
        return x(d.category);
      })
     .attr("y", function (d) {
        return y(d.sales);
      })
     .attr("width", barWidth)
     .attr("height", function (d) {
        return height - y(d.sales) - 10;
      })
     .attr("fill", function (d) {
        return color(d.category);
      });
    // 绘制侧边栏柱状图
    var sidebarBarWidth = sidebarWidth / data.length - 10;
    var sidebarX = d3.scaleBand()
     .domain(data.map(function (d) {
        return d.category;
      }))
     .range([0, sidebarWidth])
     .padding(0.1);
    var sidebarY = d3.scaleLinear()
     .domain([0, d3.max(data, function (d) {
        return d.quantity;
      })])
     .range([height - 10, 0]);
    sidebarSvg.selectAll(".sidebar-bar")
     .data(data)
     .enter()
     .append("rect")
     .attr("class", "sidebar-bar")
     .attr("x", function (d) {
        return sidebarX(d.category);
      })
     .attr("y", function (d) {
        return sidebarY(d.quantity);
      })
     .attr("width", sidebarBarWidth)
     .attr("height", function (d) {
        return height - sidebarY(d.quantity) - 10;
      })
     .attr("fill", function (d) {
        return color(d.category);
      });
    // 添加 x 轴标签
    svg.append("g")
     .attr("transform", "translate(0," + (height - 10) + ")")
     .call(d3.axisBottom(x));
    // 添加 y 轴标签
    svg.append("g")
     .call(d3.axisLeft(y));
    // 添加侧边栏 x 轴标签
    sidebarSvg.append("g")
     .attr("transform", "translate(0," + (height - 10) + ")")
     .call(d3.axisBottom(sidebarX));
    // 添加侧边栏 y 轴标签
    sidebarSvg.append("g")
     .call(d3.axisLeft(sidebarY));
    // 添加标题
    svg.append("text")
     .attr("x", width / 2)
     .attr("y", -10)
     .attr("text-anchor", "middle")
     .style("font-size", "16px")
     .style("font-weight", "bold")
     .text("商品销售情况");
    // 添加侧边栏标题
    sidebarSvg.append("text")
     .attr("x", sidebarWidth / 2)
     .attr("y", -10)
     .attr("text-anchor", "middle")
     .style("font-size", "16px")
     .style("font-weight", "bold")
     .text("商品销售数量");
  </script>
</body>
</html>

五、代码解释

1、我们引入了 D3.js 库，并创建了一个名为my-chart的 div 元素，作为数据可视化的容器。

2、我们定义了一些数据，包括商品类别、销售额和销售量等信息。

3、我们使用 D3.js 库的scaleOrdinal方法创建了一个颜色映射，用于区分不同的商品类别。

4、我们定义了图表的宽度和高度，以及侧边栏的宽度。

5、我们使用 D3.js 库的select方法选择了my-chart容器，并在其中创建了一个 svg 元素，作为图表的绘制区域。

6、我们使用 D3.js 库的select方法选择了my-chart容器，并在其中创建了一个侧边栏 svg 元素，作为侧边栏的绘制区域。

7、我们使用 D3.js 库的scaleBand方法创建了 x 轴和侧边栏 x 轴的比例尺，用于将商品类别映射到 x 轴上。

8、我们使用 D3.js 库的scaleLinear方法创建了 y 轴和侧边栏 y 轴的比例尺，用于将销售额和销售量映射到 y 轴上。

9、我们使用 D3.js 库的selectAll方法选择了所有的矩形元素，并在其中创建了一个名为bar的类，用于表示柱状图。

10、我们使用 D3.js 库的data方法将数据绑定到矩形元素上，并使用enter方法创建了新的矩形元素。

11、我们使用 D3.js 库的attr方法设置了矩形元素的属性，包括 x 轴坐标、y 轴坐标、宽度、高度和填充颜色等。