我需要在nvd3图中的工具提示内容中重复一些值,如何实现它。
我有一个与数据一起发送的JSON,需要在工具提示中重复。我被困住了,我需要一些帮助来实现这一目标。还是有其他方法可以遵循。
$scope.options = {
chart: {
type: 'multiBarHorizontalChart',
height: 380,
width: 350,
x: function(d) {
return d.label;
},
y: function(d) {
return d.value;
},
showControls: false,
showValues: true,
showLegend: false,
duration: 1000,
xAxis: {
showMaxMin: false
},
yAxis: {
axisLabel: 'Values',
axisLabelDistance: 100,
tickFormat: function(d) {
return d3.format('.0f')(d);
}
},
"tooltip": {
"enabled": true,
"headerEnabled": true,
"valueFormatter": function(d, i) {
"use strict"
return;
},
"keyFormatter": function(d, i) {
var i = curr.split('$')
return i[1];
},
contentGenerator: function(key, x, y, e, graph) {
if (key.data.tooltip.length != 0) {
return html(key)
} else
return "No Data to Show";
}
}
},
title: {
enable: false,
},
};
我需要重复这个HTML
function IpHtml(key) {
var head = $scope.iptraffic.category;
var html = '<div class="toolTipTraffic">' +
'<div class="head">' +
' <b>' + head + '</b>' +
'</div>' +
' <hr>' +
' <table class="table toottipTableTraffic">' +
' <tr ng-repeat=vals in key>' + // ng-repeat here
' <td>IP</td>' +
' <td>' + ': {{vals}}' + '</td>' +
' </tr>' +
' </table>' +
'</div>';
return html
}
答案 0 :(得分:0)
您需要先编译html,然后再将其传递给图表
angular.module('exampleApp', [])
.controller('exampleController', ['$scope', '$compile', function ($scope, $compile) {
function IpHtml(key) {
var tooltipScope = $scope.$new(false); // inherit from parent, so we can use 'iptraffic.category' for header
tooltipScope.key = key;
var html = '<div class="toolTipTraffic">' +
'<div class="head">' +
' <b ng-bind="iptraffic.category"></b>' +
'</div>' +
' <hr>' +
' <table class="table toottipTableTraffic">' +
' <tr ng-repeat=vals in key>' + // ng-repeat here
' <td>IP</td>' +
' <td>' + ': {{vals}}' + '</td>' +
' </tr>' +
' </table>' +
'</div>';
var element = $compile(html)(tooltipScope);
return element[0].outerHTML
}
}]);