[英]How can I style a tooltip for an NVD3 Chart?
Referencing the NVD3 framework. 引用NVD3框架。 I'm trying to add a customized tooltip for the following pie chart listed below: 我正在尝试为下面列出的饼图添加自定义工具提示:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
color:['#CE1B1F', '#FFC455', '#00A6CD'],
showLabels: false,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
$scope.data = [
{
key: "A",
y: 2
},
{
key: "B",
y: 1
},
{
key: "C",
y: 3
},
];
});
Since I'm just working with the example from Krispo's [github][1] I'm not sure how I can customize a tooltip so that it resembles the following: 由于我只是使用Krispo的[github] [1]中的示例,我不确定如何自定义工具提示,使其类似于以下内容:
In order to add custom tool-tip, you need to add tooltip
to existing nvd3 options like this: 要添加自定义工具提示,您需要将tooltip
添加到现有的nvd3选项,如下所示:
tooltip: {
contentGenerator: function (e) {
//Create and return desired tool-tip as html using e.series and e.data
}
}
If you need to use some additional values or attributes for each of your series you can define them like this in $scope.data: 如果你需要为每个系列使用一些额外的值或属性,你可以在$ scope.data中定义它们:
$scope.data = [
{
key: "CAT I",
y: 2,
MyAttribute1:"DLA Avn ... CAT I",
MyAttribute2:"DLA Energy ... CAT I"
},
{
key: "CAT II",
y: 3,
MyAttribute1:"DLA Avn ... CAT II",
MyAttribute2:"DLA Energy ... CAT II"
},
{
key: "CAT III",
y: 1,
MyAttribute1:"DLA Avn ... CAT III",
MyAttribute2:"DLA Energy ... CAT III"
},
];
now you can access custom values inside tool-tip function using e.data
like this: 现在您可以使用e.data
访问工具提示函数中的自定义值,如下所示:
tooltip: {
contentGenerator: function (e) {
var series = e.series[0];
if (series.value === null) return;
var rows =
"<tr>" +
"<td class='key'>" + series.key + '- #3: ' + "</td>" +
"<td class='x-value'>" + e.data.MyAttribute1 + "</td>" +
"</tr>" +
"<tr>" +
"<td class='key'>" + series.key + '- #5: ' + "</td>" +
"<td class='x-value'>" + e.data.MyAttribute2 + "</td>" +
"</tr>";
var header =
"<thead>" +
"<tr>" +
"<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
"<td class='key'><strong>" + series.key + "</strong></td>" +
"</tr>" +
"</thead>";
return "<table>" +
header +
"<tbody>" +
rows +
"</tbody>" +
"</table>";
}
}
There is an Edited Plunker to show you how this can be done. 有一个Edited Plunker向您展示如何做到这一点。
hope that helps. 希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.