在 angular nvd3 中使用不同的鼠标悬停值
Use Different Value on Mouseover in angular nvd3
我有一个数据集,其中包含每百分之一的频率和绝对计数。数据集如下所示:
$scope.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : 15 ,
"data" : 486
} ,
{
"label" : "B" ,
"value" : 11 ,
"data" : 403
} ,
{
"label" : "C" ,
"value" : 10 ,
"data" : 374
} ,
{
"label" : "D" ,
"value" : 9 ,
"data" : 362
} ,
{
"label" : "E" ,
"value" : 8 ,
"data" : 321
} ,
{
"label" : "F" ,
"value" : 6 ,
"data" : 246
} ,
{
"label" : "G" ,
"value" : 4 ,
"data" : 187
} ,
{
"label" : "H" ,
"value" : 1 ,
"data" : 42
}
]
}
]
包含在 this plunker 中,您可以看到当鼠标悬停在每个条上时,它显示 A 15.0
等。我希望能够显示不同的值,特别是 "count"
,作为 mouseover
行为,但在文档中看不到任何此类选项。我希望它显示为 A 486
、B 403
等
我怎样才能做到这一点?
使用工具提示内容生成器配置
tooltip: {
contentGenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value + (1e-10);
},
showValues: true,
valueFormat: function(d) {
return d3.format(',.4f')(d);
},
tooltip: {
contentGenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
key: "Cumulative Return",
values: [{
"label": "A",
"value": 15,
"data": 486
},
{
"label": "B",
"value": 11,
"data": 403
},
{
"label": "C",
"value": 10,
"data": 374
},
{
"label": "D",
"value": 9,
"data": 362
},
{
"label": "E",
"value": 8,
"data": 321
},
{
"label": "F",
"value": 6,
"data": 246
},
{
"label": "G",
"value": 4,
"data": 187
},
{
"label": "H",
"value": 1,
"data": 42
}
]
}]
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Discrete Bar Chart</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>
</html>
我有一个数据集,其中包含每百分之一的频率和绝对计数。数据集如下所示:
$scope.data = [
{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : 15 ,
"data" : 486
} ,
{
"label" : "B" ,
"value" : 11 ,
"data" : 403
} ,
{
"label" : "C" ,
"value" : 10 ,
"data" : 374
} ,
{
"label" : "D" ,
"value" : 9 ,
"data" : 362
} ,
{
"label" : "E" ,
"value" : 8 ,
"data" : 321
} ,
{
"label" : "F" ,
"value" : 6 ,
"data" : 246
} ,
{
"label" : "G" ,
"value" : 4 ,
"data" : 187
} ,
{
"label" : "H" ,
"value" : 1 ,
"data" : 42
}
]
}
]
包含在 this plunker 中,您可以看到当鼠标悬停在每个条上时,它显示 A 15.0
等。我希望能够显示不同的值,特别是 "count"
,作为 mouseover
行为,但在文档中看不到任何此类选项。我希望它显示为 A 486
、B 403
等
我怎样才能做到这一点?
使用工具提示内容生成器配置
tooltip: {
contentGenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value + (1e-10);
},
showValues: true,
valueFormat: function(d) {
return d3.format(',.4f')(d);
},
tooltip: {
contentGenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
key: "Cumulative Return",
values: [{
"label": "A",
"value": 15,
"data": 486
},
{
"label": "B",
"value": 11,
"data": 403
},
{
"label": "C",
"value": 10,
"data": 374
},
{
"label": "D",
"value": 9,
"data": 362
},
{
"label": "E",
"value": 8,
"data": 321
},
{
"label": "F",
"value": 6,
"data": 246
},
{
"label": "G",
"value": 4,
"data": 187
},
{
"label": "H",
"value": 1,
"data": 42
}
]
}]
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Discrete Bar Chart</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>
</html>