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

简介:

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

1.3 使用饼图强调部分数据

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

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

screenshot

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

但有一种情况例外当我们想要把单个值和总体进行比较时饼图是非常有效的。举个例子来说我们要看世界贫困人口的百分比。在这种情况下饼图就能很好的胜任这个工作。接下来我们就要用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只是一个开始然而这样很难准确地展现图像要表明的意图。

screenshot

**
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以非常简洁的方式展示了我们的数据。

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

screenshot

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

相关文章
|
4月前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
124 59
|
4月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
72 0
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
35 7
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
57 4
|
3月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
110 11
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
40 0
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 + JavaScript绘制饼图+1
HTML5 + JavaScript绘制饼图+1