数据可视化大屏幕，数据可视化大屏代码

欧气 2024年09月26日 21:58 4 0

<!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>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #visualization {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="visualization"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
  <script>
    // 数据准备
    var data = [
      { category: "A", value: 25 },
      { category: "B", value: 30 },
      { category: "C", value: 15 },
      { category: "D", value: 35 },
      { category: "E", value: 20 }
    ];
    // 创建可视化容器
    var svg = d3.select("#visualization")
     .append("svg")
     .attr("width", "100%")
     .attr("height", "100%");
    // 设置颜色 scale
    var colorScale = d3.scaleOrdinal()
     .domain(d3.range(data.length))
     .range(["#FF6384", "#36A2EB", "#FFCE56", "#90CAF9", "#7CB342"]);
    // 绘制饼图
    var pie = d3.pie()
     .value(function(d) { return d.value; })
     .sort(null);
    var arcs = svg.selectAll("arc")
     .data(pie(data))
     .enter()
     .append("g")
     .attr("transform", "translate(" + svg.attr("width") / 2 + "," + svg.attr("height") / 2 + ")");
    arcs.append("path")
     .attr("d", d3.arc()
       .innerRadius(0)
       .outerRadius(svg.attr("width") / 2 - 20))
     .attr("fill", function(d, i) { return colorScale(i); });
    arcs.append("text")
     .attr("transform", function(d) {
        var angle = d3.interpolateAngle(d.startAngle, d.endAngle)(0.5);
        var x = Math.sin(angle) * (svg.attr("width") / 2 - 50);
        var y = Math.cos(angle) * (svg.attr("width") / 2 - 50);
        return "translate(" + x + "," + y + ")";
      })
     .attr("dy", "0.35em")
     .text(function(d, i) { return data[i].category + ": " + data[i].value + "%"; });
    // 添加标题
    svg.append("text")
     .attr("x", svg.attr("width") / 2)
     .attr("y", svg.attr("height") / 2 - 50)
     .attr("text-anchor", "middle")
     .style("font-size", "24px")
     .style("font-weight", "bold")
     .text("数据可视化大屏");
  </script>
</body>
</html>

上述代码实现了一个简单的数据可视化大屏，展示了一个饼图，其中包含了不同类别数据的占比情况，以下是对代码的详细解释：

1、：

- 使用 HTML 的<title> 标签设置页面标题为"数据可视化大屏"。

2、数据准备：

- 定义了一个包含类别和对应值的数组data。

3、可视化容器创建：

- 使用 D3.js 选择器获取页面中的<div> 元素，并将其作为可视化容器。

- 设置容器的宽度和高度为 100%，以适应整个页面。

4、颜色 scale 设置：

- 使用 D3.js 的scaleOrdinal() 函数创建一个颜色 scale，根据数据的索引分配不同的颜色。

5、饼图绘制：

- 使用 D3.js 的pie() 函数将数据转换为弧形数据。