《JavaScript数据可视化编程》——1.3 使用饼图强调部分数据

xiaoxiao2024-05-30 111

本节书摘来自异步社区《JavaScript数据可视化编程》一书中的第1章第1.3节作者【美】Stephen A.Thomas 译者翟东方 , 张超 , 刘畅责编陈冀康更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 使用饼图强调部分数据

由于饼图并不能很有效地表达数据所以在可视化大家庭中它并不是很受欢迎。我们将在这个章节通过下面的步骤来创建饼图但首先我们要花一些时间来弄明白饼图存在的问题是什么。例如下面的图1-11它展示了一个简单的饼图。你能从这个图表中说出哪个颜色所占的比例最大哪个最小吗

这个问题很难回答。因为人类非常不擅于判断区域中的相对大小尤其是这些图形不是长方形。如果我们真想要对比这五个值用柱状图会更好。图1-12在柱状图中显示了同样的值。

很显然现在很容易就能排出每个颜色所占比例的大小了。用柱状图我们只能在一维空间进行高度对比。这也就产生了一个简单的规则如果你要和其他值进行对比那么首选柱状图。它基本上都能提供最好的可视化效果。

但有一种情况例外当我们想要把单个值和总体进行比较时饼图是非常有效的。举个例子来说我们要看世界贫困人口的百分比。在这种情况下饼图就能很好的胜任这个工作。接下来我们就要用Flotr2来构建一个这样的图表。

就像1.1.1节介绍的一样我们需要在网站中引入Flotr2类库并且设置一个div元素来包含我们接下来构建的图表。

1.3.1　第1步　定义数据这里的数据是非常直接的。根据世界银行在2008年底的报告有22.4%的世界人口的人均生活费少于1.25美元/天。这是我们图表想要强调的部分。

var data = [[[0,22.4]],[[1,77.6]]];

这里我们有一个包含两个数据集的数组一个是贫困人口的百分比22.4另一个是剩下的部分77.6。每一个数组本身还包含了一个数组。在这个例子中饼图一般情况下在每个集合中只有一个点用x和y值来表示在数组中把每一个这样的x,y值存成一个数组。对于饼图来说x值是不相干的所以我们只是用简单的0,1来占位。

1.3.2　第2步　绘制图表我们需要调用Flotr对象的draw()方法来绘制图表。这个方法需要3个参数我们HTML文档中放置图表的元素图表需要的数据还有一些选项。我们先用最少的选项开始绘制图表。

window.onload = function () { 　 Flotr.draw(document.getElementById("chart"), data, { 　 pie: { 　 show: true 　 }, 　 yaxis: { 1 showLabels: false 　 }, 　 xaxis: { 2 showLabels: false 　 }, 　 grid: { 3 horizontalLines: false, 4 verticalLines: false 　 } 　 }); 　}

正如你看见的Flotr2只请求了几个选项就绘制出了一个简单的饼图比其他一般的图表类型要请求的少。我们需要让x和y轴的标注不可用只需要在代码中1和2的位置设置showLabels属性为false。我们还需要关闭网格线因为网格对于饼图并没有什么作用。我们只需要在代码中3和4的位置设置grid选项的verticalLines和HorizontalLines两个属性就可以完成。

因为Flotr2不需要请求jQuery在例子中我们没有使用任何jQuery封装的语法。如果你在页面中引用了jQuery那么你可以将代码精简一下。

图1-13只是一个开始然而这样很难准确地展现图像要表明的意图。

**1.3.3　第3步　标注数值**接下来在图表中添加一些文本标注和图例说明。为了区分每一个标注我们不得不改变我们数据的结构。不用数组来存储而是创建一个个对象来存储每一个集合。每一个对象的data属性将包含对应的数据点我们还会创建一个label属性来放置文本标注内容。

var data = [ {data: [[0,22.4]], label: "Extreme Poverty"}, {data: [[1,77.6]]} ];

用这种方法构建我们的数据Flotr2将会自动识别标注对应的数据集。现在当我们调用draw()方法我们只需要添加一个title的选项Flotr2就会在图像上添加一个标题并且根据我们的label属性来对饼图中的一部分做一个简单的图例说明。我们会在标题中提出一个问题这使得图表更加吸引人。这也解释了我们为什么只标注了其中的一个区域这个标注区域回答了标题中的问题。

Flotr.draw(document.getElementById("chart"),data, { title: "How Much of the World Lives on $1.25/Day?", pie: { show: true }, yaxis: { showLabels: false }, xaxis: { showLabels: false }, grid: { horizontalLines: false, verticalLines: false } });

图1-14以非常简洁的方式展示了我们的数据。

尽管饼图在数据可视化大家庭中没什么好名声但在一些情况下还是非常有效的。他们并不很擅长于让用户进行多数值的比较但正如这个例子中所展现的饼图可以提供一个友好且容易理解的图像来展示单个值在整体中的比例。

1.3.4　第4步　Flotr2“bugs”的应急方案请参考本书1.1.9小节中关于创建基本柱状图表中是如何解决Flotr2类库的一些“bug”的。