如何在NVD3饼图上显示百分比％？ [英] How to display the percentage % on a NVD3 Pie Chart?

问题描述

我一直在尝试在 NVD3饼图上显示百分比，但我不'看看如何做...我在寻找 this

首先，是有一个图表选项，或者显示里面饼形图？如果是，是否有一个选项来显示百分比而不是确切的值？

感谢并享受周末！

解决方案

已能够获取示例 NVD3饼图的工作方式。

我知道的唯一方法是编辑 pieChart.js 。从此处拉出NVD3源，然后在 / src / models / 打开 pieChart.js 并添加编辑：

  tooltip = function（key，y，e，graph）{
 return'< h3>'+ key +'< / h3>'+ 
'< p>'+ y +'％< / p>'
} 
  

$ b b

或者这是一个指向 pieChart的NVD3托管链接。 js ，编辑 第19行 ，看起来像这样 '< p>'+ y +'< / p>'

确保在HTML页面中添加脚本，当您加载 nvd3.js
< script src =your / path / to / pieChart.jstype = javascript>< / script>

更新：

只要这样，你传入图表的数据就会被渲染，你将进行百分比计算并将其传递到图表中。饼图切片大小将基于发送到图表中的数据计算。

$ b

更新：2013年7月30日 b

我只是偶然遇到编辑工具提示的正确方法，而不修改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>或here，'+ y +'< / p> ;'
}）; 
  

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

希望它能帮助你。

I've been trying to display the percentage on a NVD3 Pie Chart but I don't see how to do it... I'm looking for something like this

First of all, is there a graph option or a way to display something inside each part of the Pie Chart? If yes, is there an option to display a percentage instead of the exact values?

Thanks and enjoy your weekend!

解决方案

I am assuming you have been able to get the sample NVD3 Pie Chart working.

The only way as far as I know is to edit the pieChart.js. Pull the NVD3 source from here , and under / src / models / open up pieChart.js and add edit :

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

Or here is a NVD3 hosted link to the pieChart.js , edit line 19 to look like this '<p>' + y + '</p>'

Make sure to add the script in your html page, so it ovverides pieChart settings inherited when loading nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

UPDATE:

Just so you know, the data you pass into the chart will be rendered as it is, you will have make the percentage calculations and pass it into the chart. The pie chart slices size will be calculated based on the data you send into the chart. Just letting you know, disregard if you already knew it.

UPDATE: 30th July 2013

I just stumbled upon the correct way of editing the tooltip without tinkering with the pieChart.js file.

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>'
});

Just wanted you to update the answer. So now you know two ways of doing it.

Hope it helps you.

这篇关于如何在NVD3饼图上显示百分比％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！