甜甜圈饼图 - 添加标题 - NVd3.js [英] Donut Pie Chart - Add a Title - NVd3.js

问题描述

我正在探索NVD3.js库。它让我惊讶我能如何迅速地生产它的东西。

I'm exploring the NVD3.js library. It amazes me how quickly things can be produced in it.

但是，似乎有时很难改变图表。在这种情况下，我要向我的图表添加标题。

But it seems like it's difficult to alter the chart sometimes. In this case, I would like to add a title to my chart.

另一件事，我想在工具提示中添加其他数据。

数据示例：

var data = [
{
  key: "Loans",
  y: 52.24
  note: "Expect greatest value"
}];

这是我玩的代码：

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key; })
    .values(function(d) { return d; })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true);

chart.pie
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2; })
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 ;});


  d3.select("#chart")
      //.datum(historicalBarChart)
      .datum([data])
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

return chart;
});

更新：工具提示位于 src-> models-> pieChart.js 中：

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

<我试图用我自己的功能覆盖这个。

I've tried overriding this with my own function. But either get errors or no change.

标题更新：我通常使用以下代码（或类似的标题）。

Title Update: I typically use the following code (or something similar) for titles.

svg.append("text")
    .attr("x", (width / 2))
    .attr("y", 0 - (margin.top / 2))
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Awesome Title");

当然，这在NVD3中无效。我不知道用什么函数指定标题。

But of course, this isn't valid in NVD3. I'm not aware of what function is used to specify a title.

推荐答案

我认为你在寻找图表。 =https://github.com/novus/nvd3/blob/master/src/models/pieChart.js#L274 =nofollow> tooltipContent （）JSFiddle： http://jsbin.com/idosop/7/edit

I think your looking for chart.tooltipContent() JSFiddle: http://jsbin.com/idosop/7/edit

      var tp = function(key, y, e, graph) {
            console.log(key, e, y);
            return '<h3>' + key + '</h3>' +
                   '<p>!!' +  y + '!!</p>' +
              '<p>Likes: ' +  e.point.likes + '</p>';
      };
      chart.tooltipContent(tp);

这篇关于甜甜圈饼图 - 添加标题 - NVd3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！