chart.js 饼图显示百分比_你是图表达人吗 问题解析

前些时候,Data x Design 发布了一个:《你是图表达人吗?》的测评,发布后,没几天就收到了300多份提交,以及围绕一些问题的答案也产生了激烈的讨论。其实很多时候,图表的选择并没有绝对的标准,而是要结合具体场景来决定,所以这儿的答案更多的是一种推荐和参考。以及在文章末尾部分,也会告诉大家这些问题的来源。

第5期的:用数据讲故事活动,会使用这儿的提交数据,脱敏后,作为练习的数据,到时候,你也可以亲自分析下大家的答题情况。

  • 测评地址:https://jinshuju.net/f/PRiuYO

  • 如果你还没有参加过测评,现在就可以点下面的小程序试一下。

内容比较长,以及有参考的外部链接

Q1 世界上不同宗教信仰人数的比例变化

c28197160b4fe6b9c413e73ef35bdd8b.png

2171c18f58d95f5d580b4743ed104471.png

答案解析:B

不同序列或类别太多,会让人无法区分,这时不如展开为多个小图反而更容易看清。


Q2 Python 和 R 语言使用比例的年度变化

eb45592b277016c393f08d2d7cfb2fd5.png

0153ce2170777e2c3b304407316920e0.png

答案解析:A

在查看单个年度的占比时,饼图工作良好,但查看比例变化时,不如斜率图更为直观。


Q3 不同商品类别的销售占比。

200ffd084c18712fcc856aab90ab744a.png

4b8c775fa1818f852708bb8f2ec8eba4.png

答案解析:都合适

在类别少于5个,且比例差别大的情况下,这两种图表都工作良好(不要总是盲目的抵制饼图)。


Q4 不同地块的面积

cca5a3c308c67b0a0a454257566fc6a1.png

83dc9e5035f38423e74e2271b79fa8b4.png

答案解析:B

加入太多的颜色,其实并没有额外的意义,所以保持一种颜色即可。


Q5 消费额占比为15%的食品的明细组成。

38709b1cee27f52318d5e9caab244039.png9c4d6f6b3bcb65569d76b8f44baef1da.png

答案解析:B

比例的比例只会让人困惑,所以不如用堆积百分比条,且标明具体数值更好。


问题的来源与讨论

Q1:

  • 来自:https://style.ons.gov.uk/category/data-visualisation/chart-design/#number-of-lines-per-chart

Number of lines per chart

The maximum number of lines plotted on a chart depends on how similar or different the data are and what you want to highlight.

You need to make sure that each line is easily distinguished from the others.

在图表上绘制的最多行数取决于数据的相似度或不同度以及你想突出显示的内容。

你需要确保每条线都很容易区分开来。

80b55ea7ba0d83c663729ef7724a72e0.png

Small multiples solution

Use small multiples if it is difficult to distinguish between the plot lines of four or more similar data sets. Use the same scale for all charts when comparing two or more data series.

如果难以区分四个或更多相似数据集的数据线,请使用多维展开的小图。在比较两个或多个数据系列时,对所有图表使用相同的比例。

136981faa3c12229e713f00a51fd7897.png

A singular time series of interest can also be highlighted, with all other data sets toned down.

高亮想强调的时间序列,淡化其他的线。

ffa0e20909cf1c146d0a793de409cdae.png

Q2

  • 来自 Scott Berinato - 《Good Charts》

c18dd98b50b58f705e48b876428812ca.png

ff4219ed3863adf4981444be08cfb726.png

改进1:

886bf5ee2ae3c43ef07c4b6ae688be80.png

改进2:

a7dd9c76e7c3d9797fd62c7d35d10573.png

改进3:

34a0a73e008415b5c9e0d747048cae55.png

Q3

  • 来自 Scott Berinato - 《Good Charts》

c18dd98b50b58f705e48b876428812ca.png

244f232fdb55272fc7aa466a2eef1ce0.png

小字的部分:

“Am I allowed to use pie charts?”— Anonymous workshop attendee

"我可以使用饼状图吗?"----匿名研讨会与会者

THE QUOTE ON THE PREVIOUS PAGE IS REAL, and it’s disappointing that anyone would feel such trepidation. It demonstrates how fraught choosing a chart type can become. We stress about making the right choice because we live in an age when charts draw comment and even derision on the social web. Just as the grammar police like to make fun of poor sentences, visual grammarians are ready to pounce when charts don’t meet their rules for proper chart making.

上一页上的这句话是真的,令人失望的是,有人会感到如此的恐惧。它表明了选择图表类型可能会变得非常复杂。我们之所以强调要做出正确的选择,是因为我们生活在这个时代,图表在社交网络上会引来评论,甚至是嘲笑。就像语法警察喜欢取笑差劲的句子一样,当图表不符合他们的规则时,视觉语法学家们也准备好了扑上去。

Forget all that. It’s destructive, not constructive, criticism. And although there are a few rules you should know and try to follow, most of them are actually just conventions. When it comes to choosing what kind of chart you’ll make, the ends ought to justify the means. If it clearly conveys the idea you want your audience to come away with, use it.

忘记这一切。那是破坏性的,不是建设性的批评。虽然有一些规则,你应该知道并努力遵守,但实际上大多数都只是惯例。当谈到选择你要做什么样的图表时,目的应该是合理的。如果它能清楚地传达出你想让你的听众产生的想法,就用它。

Is there a right and a wrong choice between the following charts?

以下图表之间是否有对与错之分?

854194cda7d615d4b97d801d1f4b5c33.png

Most likely not. We could create contexts in which one version would be better than the other, but if the idea is to highlight the two large pieces, both are effective enough.

很可能不是。我们可以创建出一个版本比另一个版本更好的场景。但在这儿,如果是为了突出两个主要类别的比例,这两个图表都足够有效。

Q4

  • 来自:https://style.ons.gov.uk/category/data-visualisation/using-colours/#using-colour-in-bar-charts

Using colour in bar charts

For categorical data that can't be organised into broad groups use the same colour and shade.

对于不需要分成多个大类的分类数据,使用相同的颜色和色调。

caffcdf3cbba97ee6ead134de9440d35.png

51feac7e7aa75aaeb5c8ccff5d507260.png

17bf9e82388dea1e14d9ef2bc586c033.pngc69bde7c3e827d6b8049ff7755c79a69.png

If the categorical data can be grouped use colour to help highlight this relationship.

如果可以对分类数据进行分组,则使用颜色来帮助突出这种关系。

8cd651fe86bdfbb7b295695df331f1ab.png

Q5

  • 来自:(美)黄慧敏(Dona M.Wong)- 《最简单的图形与最复杂的信息:如何有效建立你的视觉思维

786deedf479bed739686cbd2c9b5aca3.png

图表的功能是,将信息视觉化。如果要求读者在头脑中进行数学计算,那就完全失去绘制图表的意义了。一定要为读者做这些工作。别再切了!

尽管圆饼图在商业界得到普遍应用,但它并不总是从视觉上对不同部分进行对比和比较的理想方式。因此,在一个切片内部进行切割会使第二部分很难理解。对大多数读者来说,将最后的切片和原切片进行比较是一件非常繁杂的工作。

6271291cf5b455cea0d448d8bcd63ecc.png

将一个分段直条置在另一个直条中也是一个不错的选择。

a21fcfb8ce29ec8fdd6f8cf3121dc073.png

选择条形图,而不是另外一个圆饼图 在显示整体的各个部分时,分段条形图比圆饼图更加有效。另外,分段条形图可以包括更多的部分而不会看起来混乱。记住,既要标注百分比,也要标注实际数值。因为这有助于各部分按实值计算。

a325c40210cc7f8b6c8ea3b4738cc078.png

P.S. 底部「」在他处提供了一模一样的文章,我们认为有更好的阅读体验。欢迎大家尝试。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值