Question

我使用nvd3创建了一个饼图。这是我的代码：

<nvd3-pie-chart
    data="examplePieData"
    id="exampleId"
    showLabels="true"
    labelType="value"
    x="xPieFunction()"
    y="yPieFunction()"
    donut="true"
    donutRatio=".5"
    tooltips="true"  
    noData="Data aint here"
    tooltipcontent="toolTipContentFunction()"                                                  
    color="pieColorFunction()"
    donutLabelsOutside="false">
<svg height="200" style="margin-left: -121px; margin-top: -49px;"></svg>
</nvd3-pie-chart>

和

$scope.examplePieData = [
            {
                key: "First",
                y: 5
            },
            {
                key: "Second",
                y: 3
            },
            {
                key: "Third",
                y: 1
            }
        ];

        $scope.toolTipContentFunction = function(){
            return function(key, x, y, e, graph) {
                return '<p>' + key +"&nbsp;&nbsp;&nbsp;"+ y.value + '</p>'
            }
        }

        $scope.xPieFunction = function(){
            return function(d) {
                return d.key;
            };
        }
        $scope.yPieFunction = function(){
            return function(d) {
                return d.y;
            };
        }

        var pieColorArray = [  '#5EA9DD','#e76060', '#008000'];
        $scope.pieColorFunction = function() {
            return function(d, i) {
                return pieColorArray[i];
            };
        }

这里我想在没有数据时显示消息。我试过了noDate = "Message"，但它没有用。我想显示pic图表，即使y值为零(y :0)。最后，当鼠标悬停在饼图中的特定字段时，如何调整工具提示的工具提示距离和相同颜色。帮我。谢谢。

Answer 1

如果没有数据，请尝试使用chart.noData()功能。对我而言，这是完美的工作，

HTML：

<div id="chart">
  <svg></svg>
</div>

<强>使用Javascript：

var h = 300;
var r = h/2;
var data = [];
var colors = [
        'rgb(178, 55, 56)',
        'rgb(213, 69, 70)',
        'rgb(230, 125, 126)',
        'rgb(239, 183, 182)'
    ];

    nv.addGraph(function() {
        var chart = nv.models.pieChart()
            .x(function(d) { return d.label })
            .y(function(d) { return d.value })
            .color(colors)
            .showLabels(true)
            .labelType("percent");

        chart.noData("No data");

        d3.select("#chart svg")
            .datum(data)
            .transition().duration(1200)
            .call(chart)
        ;        
        return chart;
    });

没有数据时nvd3饼图和零值

1 个答案: