javascript – 甜甜圈饼图 – 添加标题 – NVd3.js

2019-09-01 01:35:18 阅读：219 来源： 互联网

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

我正在探索NVD3.js库.令我惊讶的是,它能在多快的速度下生成.

但有时似乎很难改变图表.在这种情况下,我想为我的图表添加标题.

另外,我想在工具提示中添加其他数据.所以在悬停时,它还会在我的数据中包含注释.

数据样本：

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

我已经尝试用我自己的功能来覆盖它.但要么得到错误,要么没有改变.

标题更新：我通常使用以下代码(或类似的东西)作为标题.

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中无效.我不知道用什么函数来指定标题.

解决方法:

我认为你在寻找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,javascript,d3-js,pie-chart
来源： https://codeday.me/bug/20190901/1779783.html

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

ICode9

javascript – 甜甜圈饼图 – 添加标题 – NVd3.js