带数据 [] 的饼图不显示任何消息

Question

大家好，我有一个用 nvd3 制作的饼图，当 graph.data=[] 它不显示任何内容。我想显示一个简单的消息，例如 "No data to show"

查看：

<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
                            <p>{{dataConsNetfilter}}</p>
                                <div class="no-data" ng-if="dataConsNetfilter.data.length==0">
                                        <img src="/assets/img/nodata.png"/>
                                        <h3>No Data</h3>
                                 </div>                                               
                                <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
                                    <img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
                                    <div ng-if="graph.options && graph.data.length>0">                                          
                                            <center><nvd3 options='graph.options' data="graph.data"></nvd3></center>                                            
                                        <br>
                                    </div>
                                </div>
                            </tab>

来自视图的日志：

{"types":[{"type":"netfilter.nfacct_bytes","options":{"chart":{"type":"pieChart","height":500,"width":1000,"margin":{"top":20,"right":20,"bottom":50,"left":55},"noData":"No data to show in the specified range","legend":{"rightAlign":false},"showValues":true,"legendPosition":"right","labelType":"percent","donut":true,"donutRatio":0.35,"duration":500,"xAxis":{"axisLabel":""},"yAxis":{"axisLabel":"Total","axisLabelDistance":-10}}},"data":[]}]}

选项：

var options = {
                chart: {
                    type: 'pieChart',
                    height: 500,
                    width:1000,
                    margin : {
                        top: 20,
                        right: 20,
                        bottom: 50,
                        left: 55
                    },
                    noData: 'No data to show in the specified range',
                    legend: {
                        rightAlign:false,
                    },
                    valueFormat: function(d) {
                        return d.value; 
                    },
                    x: function(d){return d.label;}, 
                    y: function(d){return d.value;},
                    showValues: true,   //Display pie labels
                    legendPosition: 'right',
                    labelType: 'percent',   //Configure what type of data to show in the label. Can be "key", "value" or "percent"                  
                    donut: true,        //Turn on Donut mode. Makes pie chart look tasty!           
                    donutRatio: 0.35,     //Configure how big you want the donut hole size to be.
                    duration: 500,
                    xAxis: {
                        axisLabel: ''
                    },
                    yAxis: {
                        axisLabel: 'Total',
                        axisLabelDistance: -10
                    }
                }
            }

我的选项卡全是空白，我想显示一条消息来通知用户...该怎么做？

Answer 1

我的解决方案是 "ng-if="dataConsNetfilter.types[0].data.length==0"

<tab ng-if="dataConsNetfilter" heading="Summary" disable="!tabClick" active="true">
                            <p>{{dataConsNetfilter}}</p>
                                <div class="no-data" ng-if="dataConsNetfilter.types[0].data.length==0">
                                        <img src="/assets/img/nodata.png"/>
                                        <h3>No Data</h3>
                                 </div>                                               
                                <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataConsNetfilter.types" resize>
                                    <img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
                                    <div ng-if="graph.options && graph.data.length>0">                                          
                                            <center><nvd3 options='graph.options' data="graph.data"></nvd3></center>                                            
                                        <br>
                                    </div>
                                </div>
                            </tab>

带数据 [] 的饼图不显示任何消息

Pie chart with data [] dont show any message

angularjs

nvd3.js

angularjs-nvd3-directives

angular-nvd3