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

2 回答

• 5

  我假设你已经能够得到样本NVD3 Pie Chart工作 .

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

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

  或者这是一个NVD3托管链接到pieChart.js，编辑 line 19 看起来像这样 '<p>' + y + '</p>'

  确保在html页面中添加脚本，因此它会在加载 nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script> 时继承tanCides设置

  UPDATE:

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

  UPDATE: 30th July 2013

  我只是偶然发现了编辑工具提示的正确方法，而没有修改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>'
  });
  

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

  希望它能帮到你 .

  回复于 2024-04-25T06:10:20+08:00
• 9

  从NVD3版本1.1.10开始，可以调整标签的类型

  只需调用 chart.pie.labelType("percent"); ，用相应的百分比标记每个切片 . 也可以显示每个切片的键 labelType("key") 或值 labelType("value") .

  完整的例子：

  var slices = [
      {name:"Part 1",value:23},
      {name:"Part 2",value:38},
      {name:"Part 3",value:67}
  ];
  
  nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .x(function(d) { return d.name })
          .y(function(d) { return d.value })
          .color(d3.scale.category10().range())
          .width(300)
          .height(300);
  
      chart.pie.pieLabelsOutside(false).labelType("percent");
  
      d3.select("#chart")
          .datum(slices)
          .transition().duration(1200)
          .attr('width', 300)
          .attr('height', 300)
          .call(chart);
  
      chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  
      return chart;
  });
  

  回复于 2024-04-25T06:10:20+08:00