基础饼图

作者: 江湖小盛 | 来源:发表于2023-04-13 10:56 被阅读0次

Matplotlib库基础-饼形图
R语言可视化（六）：饼图绘制
Echarts 饼状图基础配置和高度自适应 formatter
MPAndroidChart 基础
matplotlib日常练习（1）
举个栗子！Tableau 技巧（170）：用旭日图 Sunbur
vue+elementUi+echarts 折线图组件
R基础图绘制练习：饼图
PieChart方法记录
来来来！学matplotlib之饼图

<!DOCTYPE html>
<html lang="en">

<head>
  <title>d3</title>
  <script type="text/javascript" src="./d3@7.js"></script>
  <style type="text/css">
   
  </style>
</head>

<body>
<div id="chart"></svg>
  <script type="text/javascript"> 
  // 数据预处理
    const data = [
      { name: "Apple", value: 10 },
      { name: "Banana", value: 20 },
      { name: "Cherry", value: 30 },
      { name: "Durian", value: 40 }
    ];

    const width = 400;
    const height = 400;
    const radius = Math.min(width, height) / 2 - 10;

    // 颜色比例尺
    const colors = d3.scaleOrdinal()
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]);

    // 布局
    const pie = d3.pie()
      .value(d => d.value);
     
    const pieData = pie(data);

    // 弧形生成器
    const arcs = d3.arc()
      .outerRadius(radius)
      .innerRadius(0);

    // SVG 元素
    const svg = d3.select("#chart")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    // 弧形和标签
    const arc = svg.selectAll(".arc")
      .data(pieData)
      .enter().append("g")
      .attr("class", "arc")
      .attr("transform", `translate(${width / 2}, ${height / 2})`);

    arc.append("path")
      .attr("d", arcs)
      .attr("fill", d => colors(d.data.name));

    arc.append("text")
      .attr("transform", d => `translate(${arcs.centroid(d)})`)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(d => d.data.name);


  </script>
</body>

</html>

1.png