首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何按值而不是键对dc.js饼图进行排序

dc.js是一个基于D3.js的JavaScript图表库,用于创建交互式数据可视化图表。dc.js中的饼图(Pie Chart)是一种常见的图表类型,用于展示数据的相对比例。

在dc.js中,饼图的排序默认是按照键(Key)进行排序的,即根据数据中的不同分类进行排序。如果想按照值(Value)而不是键对饼图进行排序,可以使用dc.js提供的排序函数进行自定义排序。

以下是按值而不是键对dc.js饼图进行排序的步骤:

  1. 创建饼图对象:
  2. 创建饼图对象:
  3. 设置数据源和维度(Dimension):
  4. 设置数据源和维度(Dimension):
  5. 创建饼图组件并设置排序函数:
  6. 创建饼图组件并设置排序函数:

在上述代码中,通过.ordering()方法设置排序函数,函数中的参数d代表每个饼图片段的数据对象。通过返回-d.value实现按值降序排序,如果要按升序排序,可以返回d.value

这样,dc.js饼图将按照值的大小进行排序,从而改变了默认的按键排序方式。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统和应用场景。产品介绍链接:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。产品介绍链接:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

目前最全,可视化数据工具大集合

数据可视化技术的基本思想是将数据库中每一个数据项作为单个图元元素表示,大量的数据集构成数据图像, 同时将数据的各个属性以多维数据的形式表示,可以从不同的维度观察数据,从而对数据进行更深入的观察和分析。...免费 (CC BY-NC 可用于非盈利项目) MetricsGraphics.js – 能够针对时间序列数据进行优化 Morris.js – 非常漂亮的时间序列线状 NVD3 – 使用 d3.js 实现的可重用性图表库...Sigma.js – 致力于图形绘制的 JavaScript 库 VivaGraph – 针对 JavaScript 的图形绘制库 地图(Maps) CartoDB – CartoDB 是一款开源工具并且其允许网页上的地理数据进行存储和可视化...图标上的绘制工具 Recline.js – 使用纯 JavaScript 和 HTML 的用于构建数据应用的简单而又强大的库 Textures.js – 用于创建 SVG 模式的库 安卓工具 HelloCharts...其能够 ASCII、 SVG 和 图像进行渲染 svgo – 针对 SVG 的 Go 语言库 iOS工具 JBChartView – 同时支持线性和条形的图表库 PNChart – 使用了 Piner

3.6K70

12个数据可视化工具,人人都能做出超炫图表

MetricsGraphics 是一个在 D3.js 的基础上专为可视化时间序列数据开发的绘图库。虽然它只支持线图、散点图、柱状、直方图和数据表格,但它在这几类图表上的表现非常强。...百度的 ECharts 是一个很棒的工具,它支持在绘制完数据后再进行操作。这个被称为 Drag-Recalculate 的特性使得用户可以在图表之间拖动一部分的数据并得到实时的反馈。...虽然并不是用户最友好的工具,但 d3.js 在 JavaScript 绘图界的重要性是不可小觑的。许多其他的库都是基于它所开发,因为它提供了你所能想到的所有功能。...9. dc.js dc.js 是一个开源的 JavaScript 绘图库。它非常适合用来创建交互式的仪表盘(Dashboard)。...它支持 11 种图表类型,包括区域、线图、柱状、气泡和散点图。同时也支持所有现代浏览器以及 IE 10 以后的版本。 适合人群:熟悉 d3 并想要可重用图表的开发者。

2.1K30
  • 超详细的大数据学习资源推荐(下)

    Redis的快速、轻型代理; Twitter Fatcache:闪存的/缓存; Twitter Twemcache:Memcache的分支。...; HanoiDB:Erlang LSM BTree存储; LevelDB:谷歌写的一个快速-存储库,它提供了从字符串到字符串的有序映射; LMDB:Symas开发的超快、超紧凑的...-嵌入的式数据存储; RocksDB:基于性LevelDB,用于快速存储的嵌入式持续性-存储。...一组相当强大的可重用的图表,还有D3.js的样式; Echarts:百度企业场景图表; Envisionjs:动态HTML5可视化; FnordMetric:写SQL查询,返回SVG图表,不是表...; NVD3:d3.js的图表组件; Peity:渐进式SVG条形,折线和; Plot.ly:易于使用的Web服务,它允许快速创建从热到直方图等复杂的图表,使用图表Plotly的在线电子表格上传数据进行创建和设计

    2.2K50

    让数据图表发挥更大的价值 | 20条实用建议

    柱状的起点要从0基线开始 截断数据会导致错误的表述。 在下面的例子中,通过左边的图表,你可以很快得出B是D的3倍多的结论。 实际上,二者的差距要小得多(见右)。...直接在图表上贴标签所有浏览者都有很大帮助。 而对照图例需要把数值和相应的区域一一应上,会耗费浏览者更多时间和精力。 左图--带有独立图例的,右,每个区域旁边都带有标签 10....的区块大小进行排序以增强可读性 在使用时,有几种常用的方式: 把最大的一个区块放在12点的位置,然后把其余的区块顺时针方向降序排列。...左边水平条形顺序随机,右边从最大到最小排序 13. 细细的圈状图表缺乏可读性 一般来说,不是可读性最好的图表,因为很难直观对比相似的数值。...使用水平条形不是旋转的标签 这个简单的技巧将确保用户能够更方便地查看图表(不至于使他们的脖子紧张)。 19.

    1.9K40

    搞定高质量数据可视化的20条建议

    用户可能会认为连接“标记”的线上的每个点都代表了当时的收入实际上在那个特定时间的真实收入数字是未知的。 在这种情况下,使用垂直条形可能是一个更好的选择。...但是,如果你决定使用,这里有一些如何使它正确发挥作用的建议: 显示的区块不要多于5-7个,保持整体视觉简单清晰。...由于颜色和背景色对比度低,写在图表内部的标签很难识别 11 的区块大小进行排序以增强可读性 在使用时,有几种常用的方式: 把最大的一个区块放在12点的位置,然后把其余的区块顺时针方向降序排列...12 避免随机性 同样的建议也适用于许多其他类型的图表,不要默认字母顺序排序。...左边水平条形顺序随机,右边从最大到最小排序 13 细细的圈状图表缺乏可读性 一般来说,不是可读性最好的图表,因为很难直观对比相似的数值。

    1.9K30

    干货 :搞定高质量数据可视化的20条建议

    用户可能会认为连接“标记”的线上的每个点都代表了当时的收入实际上在那个特定时间的真实收入数字是未知的。 在这种情况下,使用垂直条形可能是一个更好的选择。...但是,如果你决定使用,这里有一些如何使它正确发挥作用的建议: 显示的区块不要多于5-7个,保持整体视觉简单清晰。...由于颜色和背景色对比度低,写在图表内部的标签很难识别 11 的区块大小进行排序以增强可读性 在使用时,有几种常用的方式: 把最大的一个区块放在12点的位置,然后把其余的区块顺时针方向降序排列...12 避免随机性 同样的建议也适用于许多其他类型的图表,不要默认字母顺序排序。...左边水平条形顺序随机,右边从最大到最小排序 13 细细的圈状图表缺乏可读性 一般来说,不是可读性最好的图表,因为很难直观对比相似的数值。

    1.7K30

    【数据可视化】Echarts最常用图表

    肉眼高度差异很敏感,辨识效果非常好。 一般情况下,柱状的x轴是时间维,用户习惯性地认为存在时间趋势。如果遇到x轴不是时间维的情况,建议用不同的颜色区分每根柱子,改变用户对时间趋势的关注。...之后各种组件进行详细的介绍。 3.1 绘制堆积柱状 在堆积柱状图中,每一根柱子上的分别代表不同的数据大小,各个分层的数据总和代表整根柱子的高度。...堆积面积又被称为堆积区域,它强调数量随时间变化的趋势,用于引起人们总值趋势的注意。与堆积折线图不同,堆积面积可以更好地显示有很多类别或数值近似的数据。...同时,切忌将图拉得过开,若要突出某一块,则可单独将其拉开。此外,还应该尽量升序或降序排列,标准的排序方式是降序。...按照从大到小的顺序,顺时针排列各个扇区,这样的排序非常有必要,因为很难相差不大的两个扇区进行大小比较,一致的排序方式可以为用户提供可靠的帮助。 有问题请指出,大家一起进步!!!

    35410

    【推荐】非常棒的大数据学习资源

    的快速、轻型代理; Twitter Fatcache:闪存的/缓存; Twitter Twemcache:Memcache的分支。...; HanoiDB:Erlang LSM BTree存储; LevelDB:谷歌写的一个快速-存储库,它提供了从字符串到字符串的有序映射; LMDB:Symas开发的超快、超紧凑的-嵌入的式数据存储...; RocksDB:基于性LevelDB,用于快速存储的嵌入式持续性-存储。...D3Plus:一组相当强大的可重用的图表,还有D3.js的样式; Echarts:百度企业场景图表; Envisionjs:动态HTML5可视化; FnordMetric:写SQL查询,返回SVG图表,不是表...; NVD3:d3.js的图表组件; Peity:渐进式SVG条形,折线和; Plot.ly:易于使用的Web服务,它允许快速创建从热到直方图等复杂的图表,使用图表Plotly的在线电子表格上传数据进行创建和设计

    1.8K50

    Jupyter-Notebook使用技巧

    左边的变成蓝色,下快捷M(键盘上的),就变成了Markdown格式 ? 2、通过工具栏进行设置: 每个cell中默认是代码的格式 ? 我们改变cell的格式:选择标记 ?...当编辑栏变成蓝色:下键盘上的A,在上面生成一个新的单元格,如果是下B,则在下面生成一个新的空白单元格: ?...## 多 ##### 玫瑰 ##### 内嵌 如果我们的目录层级有更新操作,可以使用这个按钮更新: ?...高亮显示 如果我们觉得目录中某层级的标题比较重要,自己想高亮显示,可以如下操作: 假设我们想高亮显示多和内嵌: ? 添加高亮之后的效果: ?...其中变量的 shape (形状)这个参数在进行矩阵运算时,十分实用,并且这个窗口还可以调节大小,排序等功能,十分推荐 魔法命令 下面?

    1.4K40

    手摸手告诉 UI 妹子数据可视化 20 条优化细则【切仔直接收藏】

    正负值的绘图方向 当数据存在正负值时,注意要在基线的对应两侧绘制,不是在基线的同一侧绘制正负值; 比如,使用水平柱状,要在基线左侧绘制负值,在右侧绘制正值。 2....它有助于解释随着时间是如何发生变化的,如果时间间隔较短,它的展示更准确,当时间间隔长,数据更新不频繁时,它可能会造成一些“误会”。...请直接在图上标注 如果在旁使用 lable 标签会大大降低可读性,用户不得不一一去对比得出结论,这是非常耗时耗精力的,所以请直接在图上进行标注。 10....顺时针从大到小设置 按序设置切片大小位置更利于阅读: 将最大的切片放在 12 点钟位置,然后顺时针方向的降序放置下一个切片; 12....避免柱状随机排列 和同理,同样的建议也适用于许多其他图表~ 不要默认字母排序需将最大放在顶部(对于水平柱状)或左侧(对于垂直柱状),以确保最重要的占据最显眼的空间,从而减少眼球运动和阅读图表所需的时间

    1.3K20

    助力数据可视化的 20 个指导方法

    这有助于说明如何随时间变化,并且在很短的时间间隔内工作得很好,但是当数据更新不频繁时,这可能会导致混淆。 使用折线图表示年收入,如果每月更新,将打开图表进行解释。...但是,如果您决定使用,这里有一些关于如何使其工作的建议: 不要包括超过 5-7 片,保持简单 您可以将额外的最小段分组到“其他”切片中 9....不要默认为字母排序。将最大放在顶部(对于水平条形)或左侧(对于垂直条形),以确保最重要的占据最突出的空间,减少眼球运动和阅读图表所需的时间。 13....无法阅读薄甜甜圈 通常不是最容易阅读的图表,因为很难比较相似的。当我们去掉中间部分并创建一个圆环时,我们可以腾出空间来显示额外的信息,但牺牲了清晰度,如果走极端,它会使图表变得毫无用处。...关注易读性 确保排版传达信息并帮助用户专注于数据,不是分散注意力。

    1.7K30

    50 个数据可视化图表

    这些图表根据可视化目标的 7 个不同情景进行分组。例如,如果要想象两个变量之间的关系,请查看“关联”部分下的图表。或者,如果您想要显示如何随时间变化,请查看“变化”部分,依此类推。...从审美角度支持信息不是掩盖信息。 信息没有超负荷。 01 关联(Correlation) 关联图表用于可视化 2 个或更多变量之间的关系。也就是说,一个变量如何相对于另一个变化。 1....通过“响应”变量它们进行分组,您可以检查 X 和 Y 之间的关系。以下情况用于表示目的,以描述城市里程的分布如何随着汽缸数的变化变化。 23....分布式包点(Distributed Dot Plot) 分布式包点显示组分割的点的单变量分布。点数越暗,该区域的数据点集中度越高。通过中位数进行不同着色,组的真实定位立即变得明显。 26....条形(Bar Chart) 条形是基于计数或任何给定指标可视化项目的经典方式。在下面的图表中,我为每个项目使用了不同的颜色,但您通常可能希望为所有项目选择一种颜色,除非您进行着色。

    4K20

    117.精读《Tableau 探索式模型》

    不同图表来说,影响最大的是行与列,它能决定用什么图表,如何拆分数据。标记往往是改变图表中辅助性元素,比如文字或者颜色等等。 工具提示 不影响任何图像显示,仅仅在提示信息中新增字段信息。...**由于最终勾选操作落地在点上,不是区间上(连续也不适合进行圈选),所以默认维度进行筛选是最准确的理解。...不适合行列的图表 就不适合行列,因为是根据离散维度进行拆分,扇叶大小可以由一个度量字段决定,因此来说,行就对应到 “颜色”、列就对应到新增的 “角度” 这个标记: 没有维度轴的图表 只有行配置的图形推荐用表格...对表格来说,点就是单元格: 柱状来说,点就是柱子: 对折线图来说,点就是节点: 来说,点就是扇叶: 所有的点被选中后都有基本高亮功能,最重要的是能对选中的点进行保留、排除、局部排序等等...比如我们可以对上图选中的几个扇形区域进行从小到大排序: 我们也可以排除某些点,这个在配置章节有提到过,这个操作最终将转化为新增筛选条件: 最后,选中状态在单图表中看似只有高亮效果,但是在多图表联动时

    2.5K20

    50个最有价值的数据可视化图表(推荐收藏)

    这些图表根据可视化目标的 7 个不同情景进行分组。例如,如果要想象两个变量之间的关系,请查看“关联”部分下的图表。或者,如果您想要显示如何随时间变化,请查看“变化”部分,依此类推。 ?...从审美角度支持信息不是掩盖信息。 信息没有超负荷。 01 关联(Correlation) 关联图表用于可视化 2 个或更多变量之间的关系。也就是说,一个变量如何相对于另一个变化。 1....通过“响应”变量它们进行分组,您可以检查 X 和 Y 之间的关系。以下情况用于表示目的,以描述城市里程的分布如何随着汽缸数的变化变化。 ? 23....分布式包点(Distributed Dot Plot) 分布式包点显示组分割的点的单变量分布。点数越暗,该区域的数据点集中度越高。通过中位数进行不同着色,组的真实定位立即变得明显。 ?...条形(Bar Chart) 条形是基于计数或任何给定指标可视化项目的经典方式。在下面的图表中,我为每个项目使用了不同的颜色,但您通常可能希望为所有项目选择一种颜色,除非您进行着色。 ?

    4.6K20

    50种常见Matplotlib科研论文绘图合集!赶紧收藏~~

    从审美角度支持信息不是掩盖信息。 信息没有超负荷。 01 关联 (Correlation) 关联图表用于可视化2个或更多变量之间的关系。也就是说,一个变量如何相对于另一个变化。...通过“响应”变量它们进行分组,您可以检查 X 和 Y 之间的关系。以下情况用于表示目的,以描述城市里程的分布如何随着汽缸数的变化变化。...23、直方密度线图 (Density Curves with Histogram) 带有直方图的密度曲线汇集了两个所传达的集体信息,因此您可以将它们放在一个图中不是两个图中。...因此,如果您要使用,强烈建议明确记下每个部分的百分比或数字。 33、树形 (Treemap) 树形类似于,它可以更好地完成工作不会误导每个组的贡献。...在下面的图表中,我为每个项目使用了不同的颜色,但您通常可能希望为所有项目选择一种颜色,除非您进行着色。颜色名称存储在下面代码中的all_colors中。

    4.1K20

    总结了50个最有价值的数据可视化图表

    这些图表根据可视化目标的 7 个不同情景进行分组。 例如,如果要想象两个变量之间的关系,请查看“关联”部分下的图表。或者,如果您想要显示如何随时间变化,请查看“变化”部分,依此类推。...从审美角度支持信息不是掩盖信息。 信息没有超负荷。 01 关联(Correlation) 关联图表用于可视化 2 个或更多变量之间的关系。也就是说,一个变量如何相对于另一个变化。 1....通过“响应”变量它们进行分组,您可以检查 X 和 Y 之间的关系。 以下情况用于表示目的,以描述城市里程的分布如何随着汽缸数的变化变化。 23....分布式包点(Distributed Dot Plot) 分布式包点显示组分割的点的单变量分布。点数越暗,该区域的数据点集中度越高。通过中位数进行不同着色,组的真实定位立即变得明显。 26....条形(Bar Chart) 条形是基于计数或任何给定指标可视化项目的经典方式。在下面的图表中,我为每个项目使用了不同的颜色,但您通常可能希望为所有项目选择一种颜色,除非您进行着色。

    3.3K10

    数据可视化图表

    需要比较数据时,尤其是比较两个以上整体的成分时,请务必使用条形或柱形,切勿要求看图人将扇形转换成数据在间相互比较,因为人的肉眼对面积大小不敏感,会导致对数据的误读。...② 数据关系选择 根据可视化专家 Andrew Abela 该数据关系分类方式的提炼,他提出将图表展示的数据关系分为四类:比较、分布、构成和联系。...所以当时间序列的_数据点较少时,可以使用柱形_,当数据点较多时,则建议使用折线图。 Q: 面积和折线图都可以表示时间序列的趋势,两者之间如何选择?...如使用面积,则存在数据序列之间相互遮挡的情况,除了靠近横轴的那个数据序列外,很难观察出其他数据序列的变化趋势。 Q: 是不是应该避免使用,能不用就不用?...所以同样是想表示占比,这种情况使用不是很有效的图表形式。

    2K40

    2022年最新Python大数据之Excel基础

    字母笔/画排序 数据分析的情况各有各的不同,有时需要排序的对象并不是数据,而是文字或英文字母。可以通过笔画和字母的方式进行排序。 数据筛选 普通筛选 对表格数据进行筛选,需要先进入筛选模式。...Excel图表类型 为了揭示数据规律 为了有说服力、促进沟通 专业的图表可以展示专业素养 了解有哪些图表类型 柱状 折线图 面积 雷达 Excel图表使用 图表的创建方式 图表的数据源一般是统计汇总表或者是数据量比较少的明细表...1.当然,还有一种更简便的方法通过ctrl+c ctrl+v 快捷添加数据列 •鼠标选中要添加的数据序列,ctrl+c 选中图表,ctrl+v 并不是所有图表都需要图例,图表上一般默认带有图例...,可以对它进行删除/添加/修改位置等操作 •可以通过菜单操作,也可以通过鼠标拖动选择 除了和圆环外,其它的标准图表一般至少有两个坐标轴 新创建的图表默认没有坐标轴标题,添加坐标轴标题可以使坐标轴意义更加明确...所有数据在一张表里 透视表的原始数据需要放在一张工作表里,不是分多张工作表放置。

    8.2K20

    【干货教程】可视化大数据最易犯的10个错误:排序混乱,扭曲数据...

    通过可视化信息,我们的大脑可以更有效地合成和保留信息内容,增强信息的理解。但如果是不正确的数据可视化,可能弊大于利。错误的图表可以减少数据的信息,更糟的是完全背道而驰。   错误1....混乱的分割   ,是最简单的图表之一。的设计应该直观清晰,理论上,一个不应该分割超过5块。   最大一块12点钟开始,顺时针方向旋转。剩余部分顺时针或逆时针方向大小h降序排列。...错误3.数据排序混乱   你的内容应该以一种合乎逻辑的和直观的方式来引导读者了解数据。所以,记得将数据类别字母顺序、大小顺序、或价值进行排序。 ?   ...例如,气泡大小应该根据区域扩展,不是直径。 ?   错误7.在一张图表上使用颜色过多   颜色用得太花,会给数据增加不可承受之重,相反,设计师应该采用同一色系,或者类比色。 ?   ...总结: 可视化大数据就是化繁为简,在制作图表与数据时,切忌繁琐与杂乱不堪的布局,只要给用户最直接的数据感官即可,不要在进行过多的画蛇添足动作。

    1K60

    那么多的数据可视化图表,你选对了吗?

    需要比较数据时,尤其是比较两个以上整体的成分时,请务必使用条形或柱形,切勿要求看图人将扇形转换成数据在间相互比较,因为人的肉眼对面积大小不敏感,会导致对数据的误读。...② 数据关系选择 根据可视化专家 Andrew Abela 该数据关系分类方式的提炼,他提出将图表展示的数据关系分为四类:比较、分布、构成和联系。...所以当时间序列的_数据点较少时,可以使用柱形_,当数据点较多时,则建议使用折线图。 Q: 面积和折线图都可以表示时间序列的趋势,两者之间如何选择?...如使用面积,则存在数据序列之间相互遮挡的情况,除了靠近横轴的那个数据序列外,很难观察出其他数据序列的变化趋势。 Q: 是不是应该避免使用,能不用就不用?...所以同样是想表示占比,这种情况使用不是很有效的图表形式。

    1.2K30
    领券