饼图已过时？探索令人惊叹的替代百分比可视化图形（附代码）

2023-10-29 19:14:06

饼图早已成为展示比例和百分比的图表选择标杆，因其直观易懂的特性。然而，数据可视化的世界正在不断发展，现在有了更多激动人心的选择可以用来呈现百分比数据，让你的数据脱颖而出。

本文将介绍一些令人惊叹的饼图替代方案，探索它们的独特之处，并提供代码示例，帮助你将这些炫酷的图形集成到你的数据可视化项目中。

雷达图：

雷达图是一个多维数据集的绝佳选择，它通过从一个中心点向外延伸的射线来显示不同变量的数据。每个射线代表一个变量，射线的长度表示变量的值。雷达图不仅可以显示百分比，还可以比较不同类别的数据。

代码示例（Python）：

import matplotlib.pyplot as plt

# 数据准备
categories = ['A', 'B', 'C', 'D', 'E']
values = [20, 30, 40, 10, 50]

# 创建雷达图
plt.figure(figsize=(10, 10))
plt.subplot(polar=True)

# 添加数据
plt.plot(categories, values, label='示例数据')
plt.fill(categories, values, alpha=0.3)

# 标签和标题
plt.legend()
plt.title('雷达图百分比可视化')
plt.show()

树状图：

树状图是一种分层数据结构的可视化，它展示了数据的层次关系。树状图可以用来表示百分比，因为它的大小与数据的大小成正比。树状图特别适合显示复杂的数据集中的层次结构。

代码示例（JavaScript）：

// 使用 d3.js 创建树状图
const data = {
  name: '根节点',
  children: [
    { name: '子节点 1', value: 30 },
    { name: '子节点 2', value: 40 },
    { name: '子节点 3', value: 20 }
  ]
};

const width = 500;
const height = 500;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };

const svg = d3.select('body').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

const g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

const tree = d3.tree().size([height, width]);
const root = d3.hierarchy(data);
const links = tree(root).links();
const nodes = tree(root).descendants();

g.selectAll('.link')
  .data(links)
  .enter()
  .append('path')
  .attr('class', 'link')
  .attr('d', d3.linkHorizontal()
    .x(d => d.y)
    .y(d => d.x)
  );

g.selectAll('.node')
  .data(nodes)
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', d => 'translate(' + d.y + ',' + d.x + ')')
  .append('circle')
  .attr('r', 5)
  .attr('fill', d => d.children ? '#000' : '#fff');

进度条：

进度条是一个简单但有效的可视化元素，用来显示任务或进程的完成百分比。进度条是指示仪表板或其他数据可视化中进展情况的理想选择。

代码示例（HTML）：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>

词云：

词云是一种可视化，它将文本数据中的单词大小与频率相关联。词云可以用来突出显示文本中最重要的单词或主题。词云在展示不同单词或主题的相对重要性时非常有效。

代码示例（Python）：

import wordcloud

# 数据准备
text = """
这是展示不同单词频率的可视化示例。
更频繁的单词会更大，重要性也会更高。
"""

# 创建词云
wordcloud = wordcloud.WordCloud(width=800, height=600).generate(text)

# 显示词云
plt.figure(figsize=(10, 10))
plt.imshow(wordcloud, interpolation='bilinear')
plt.axis('off')
plt.show()