我正在探索 NVD3.js 库。令我惊讶的是,它可以如此快速地生产出东西。
但有时似乎很难改变图表。在这种情况下,我想为我的图表添加一个标题。
另一件事,我想在 tool-tip 中添加额外的数据。所以在悬停时,它还会在我的数据中包含注释。
数据样本:
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 中无效。我不知道使用什么函数来指定标题。