首页 > 编程语言> 文章详细

javascript – 如何在NVD3饼图上显示百分比％？

2019-07-14 01:36:17 阅读：293 来源： 互联网

标签：javascript d3-js pie-chart nvd3-js

我一直试图在NVD3 Pie Chart上显示百分比,但我不知道怎么做…我正在寻找像this这样的东西

首先,是否有图形选项或在饼图的每个部分内显示某些内容的方法？如果是,是否有显示百分比而不是确切值的选项？

谢谢,享受你的周末！

解决方法:

我假设您已经能够使样本NVD3 Pie Chart正常工作.

据我所知,唯一的方法是编辑pieChart.js.从here中拉出NVD3源,并在/ src / models /下打开pieChart.js并添加编辑：

tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' % </p>'
      }

或者这是一个到pieChart.js的NVD3托管链接,编辑第19行看起来像这个’< p>‘ y’< / p>‘

确保在html页面中添加脚本,以便在加载nvd3.js时继承了pieChart设置.
< script src =“your / path / to / pieChart.js”type =“application / javascript”>< / script>

更新：

您知道,传递到图表中的数据将按原样呈现,您将进行百分比计算并将其传递到图表中.饼图切片大小将根据您发送到图表中的数据计算.只是让你知道,不管你是否已经知道它.

更新：2013年7月30日

我只是偶然发现了编辑工具提示的正确方法,而没有修改pieChart.js文件.

var chart = nv.models.pieChart().x(function(d) {
    return d.key;
}).y(function(d) {
    return d.daily[0].sales;
}).showLabels(true).values(function(d) {
    return d;
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
});

只是想让你更新答案.所以现在你知道两种方法.

希望它能帮到你.

标签：javascript,d3-js,pie-chart,nvd3-js
来源： https://codeday.me/bug/20190714/1454808.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何在NVD3饼图上显示百分比％？