如何设计 NVD3 图表的工具提示样式?
How can I style a tooltip for an NVD3 Chart?
引用 NVD3 框架。我正在尝试为下面列出的饼图添加自定义工具提示:
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
},
];
});
因为我只是在使用 Krispo [github][1] 中的示例,所以我不确定如何自定义工具提示,使其类似于以下内容:
为了添加自定义工具提示,您需要将 tooltip
添加到现有的 nvd3 选项中,如下所示:
tooltip: {
contentGenerator: function (e) {
//Create and return desired tool-tip as html using e.series and e.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"
},
];
现在您可以使用 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>";
}
}
有一个 Edited Plunker 可以向您展示如何做到这一点。
希望对您有所帮助。
引用 NVD3 框架。我正在尝试为下面列出的饼图添加自定义工具提示:
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
},
];
});
因为我只是在使用 Krispo [github][1] 中的示例,所以我不确定如何自定义工具提示,使其类似于以下内容:
为了添加自定义工具提示,您需要将 tooltip
添加到现有的 nvd3 选项中,如下所示:
tooltip: {
contentGenerator: function (e) {
//Create and return desired tool-tip as html using e.series and e.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"
},
];
现在您可以使用 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>";
}
}
有一个 Edited Plunker 可以向您展示如何做到这一点。
希望对您有所帮助。