Question

我需要在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
        }

Answer 1

您需要先编译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
    }
  }]);

在angular-nvd3工具提示中进行ng-repeat

1 个答案: