在 dc.js 中向饼图标签添加百分比

2024-01-14

我有一个饼图,我想为其添加百分比到标签。这里有一个jsfiddle http://jsfiddle.net/vz64xbmw/22/饼图和代码如下。现在图表显示了实际值。我看了看dc.js 入门和操作指南 http://dc-js.github.io/dc.js/docs/stock.html这是仪表板的示例。它的标签中包含带有百分比的图表。但是,当我尝试复制该结构时,出现错误。例如,当我像这样使用标签函数时

.label(function(d) {if(all.value){return d.key + " " + d.value / all.value();}
.renderLabel(true)

在控制台中它说所有都未定义。另外,d.key也什么也不返回。我想我的数据有不同的结构。帮助表示赞赏。谢谢。

HTML

<body>
    <div id='Chart'>
    </div>
</body>

JS

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group();

dc.pieChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .label(function(d){return d.value});

dc.renderAll();

Data

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];

你很接近!在这种情况下,我建议您执行以下操作:

.label(function(d) {
    console.log(JSON.stringify(d));
})

了解数据的结构。如果你这样做,你会看到key and value正在下d.data,所以你可以有一个像这样的标签

.label(function(d) {
    return d.data.key + ' ' + d.data.value + '%';
})

如果您只想计算显示的圆的分数,您可以使用startAngle and endAngle特性。

.label(function(d) {
    return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});

(d.endAngle - d.startAngle)将为您提供切片显示的弧度数,因此您可以通过除以圆中的弧度数来计算百分比。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 dc.js 中向饼图标签添加百分比 的相关文章

随机推荐

  • 使用神经网络进行异或 (Matlab)

    所以 我希望这是我正在做的一件真正愚蠢的事情 并且有一个简单的答案 我正在尝试训练 2x3x1 神经网络来解决 XOR 问题 它不起作用 所以我决定深入了解发生了什么 最后 我决定自己分配权重 这是我想出的权重向量 theta1 11 0
  • 在 mac M1 芯片上构建 docker amd64 镜像

    我正在尝试以两种方式在我的 mac M1 arm64 上构建 dockerfile 下面是 dockerfile 的重要部分 FROM erlang 24 elixir expects utf8 ENV ELIXIR VERSION v1
  • MinGW 32“未定义对‘ExitProcess@4’的引用”

    出于学习目的 我编写了一个小型汇编程序 test asm global main extern ExitProcess 4 section text main mov ebx 0 push ebx call ExitProcess 4 比我
  • 保存并加载自定义 Tensorflow 模型(自回归 seq2seq 多元时间序列 GRU/RNN)

    我正在尝试实现一个自回归 seq 2 seq RNN 来预测时间序列数据 如本 TensorFlow 教程所示 https www tensorflow org tutorials structured data time series a
  • 如何使用 python 读取和写入表/矩阵到文件?

    我正在尝试创建一个程序 该程序获取数据并将其放入文本文件中仅包含数字的 2 x 10 表中 然后程序需要在以后的迭代中检索此信息 但我不知道该怎么做 我一直在研究 numty 命令 常规文件命令以及尝试制作表格的方法 但我似乎无法让这一切发
  • 如何将现有的 SOAP 请求消息导入到 SoapUI?

    我有一堆 XML 格式的 SOAP 请求消息 有没有办法将它们导入到 SoapUI 项目中 我想导入它们并将其作为 测试请求 测试步骤添加到现有测试用例中 一种简单且更自动的方法是使用 groovy 脚本从包含 xml 请求文件的目录自动创
  • 不保留函数依赖的分解

    BCNF 分解什么时候不能保留函数依赖性 我试图弄清楚 R V W X Y Z 取自数据库设计和关系理论 http shop oreilly com product 0636920025276 do R S J T S J gt T T g
  • Python Pandas - 将某些列类型更改为类别

    我已将以下 CSV 文件输入到 iPython Notebook 中 public pd read csv categories csv public 我还将 pandas 导入为 pd 将 numpy 导入为 np 将 matplotli
  • 如何通过属性获取枚举类型?

    我编写了一个枚举类 我想按类型获取属性或按属性获取类型 但这似乎不可能 public enum AreaCode area1 7927 area2 7928 area3 7929 private final int ac AreaCode
  • 尽管存在 OpenSessionInViewFilter,但出现 LazyInitializationException

    尽管在堆栈跟踪本身中看到了过滤器 但我似乎在 Spring MVC 3 0 Hibernate 3 5 应用程序中随机收到以下 LazyInitializationException 知道我应该调查什么吗 07 Jun 2011 13 48
  • 如何在javascript中替换对象数组中的对象(lodash)

    我有以下对象数组 var arr id a1 guid sdfsfd value abc status false id a2 guid sdfsfd value def status true 我有这个对象 var obj id a1 g
  • Hotelling 在 python 中的 T^2 分数

    我在 python 中使用 matplotlib 将 pca 应用于数据集 然而 matplotlib 并不像 Matlab 那样提供 t 平方分数 有没有办法像Matlab一样计算Hotelling的T 2分数 Thanks matplo
  • 在 Interface Builder 中为通用应用程序创建单个 .xib? (iOS)

    如果这是一个愚蠢的问题 我深表歉意 但我已经做了一些谷歌搜索并进行了搜索 但没有发现有人问这个确切的问题 我从事 iOS 开发已经有一段时间了 但我对 Interface Builder 完全陌生 我想知道的是 有没有办法只创建一个 xib
  • 有没有办法刷新 WPF 中的所有绑定?

    如果我的代码看起来有点像下面的代码 是否可以直接刷新所有绑定 或者我是否必须对所有绑定进行硬编码才能刷新 服务端 ServiceContract public interface IMyServiceContract OperationCo
  • 图着色算法:典型的调度问题

    我正在训练像 UvA 这样的代码问题 我有这样一个问题 其中我必须 给定一组n考试和k参加考试的学生 了解是否可以将所有考试安排在two时隙 Input 几个测试用例 每个都以包含以下内容的行开头1 安排不同的考试 第2行是案例数k其中至少
  • Stracing 以附加到多线程进程

    如果我想跟踪一个多线程进程 其所有线程 我应该怎么做 我知道可以执行 strace f 来跟踪分叉进程吗 但是当我开始跟踪时附加到已经是多线程的进程怎么样 有一种方法可以告诉 strace 跟踪属于该进程的所有线程的所有系统调用吗 2021
  • 显式指定 KSQL 流主题名称

    我有两个 KSQL 主题my topic 1 and my topic 2 消息通过 AVRO 序列化 由于历史原因 my topic 1架构不在推荐范围内topic value格式 而是my custom subject name 我想通
  • 如何使用 PowerShell 搜索文件夹

    我想搜索特定目录和子目录中的文件夹 我尝试用谷歌搜索它 但没有真正找到任何有用的例子 Get ChildItem C test recurse Where Object PSIsContainer eq true and Name matc
  • 设置颜色以清晰显示数字

    在这个特定 viridis 选项的条形图中 是否可以设置颜色 即使对于刻度的较暗选项 也可以清晰地显示图表内的数字 library ggplot2 Year lt c rep c 2006 07 2007 08 2008 09 2009 1
  • 在 dc.js 中向饼图标签添加百分比

    我有一个饼图 我想为其添加百分比到标签 这里有一个jsfiddle http jsfiddle net vz64xbmw 22 饼图和代码如下 现在图表显示了实际值 我看了看dc js 入门和操作指南 http dc js github i