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

时间:2017-08-03 17:08:40

标签: angularjs nvd3.js angular-nvd3 angularjs-nvd3-directives

大家好我有一个用nvd3制作的饼图,当graph.data = []时,它会显示任何内容..我想显示一条简单的消息,如"没有数据显示"

查看:

<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
                    }
                }
            }

我的标签全部为空白,我想显示一条消息通知用户......如何操作?

enter image description here

1 个答案:

答案 0 :(得分:0)

我的解决方案是&#34; ng-if =&#34; dataConsNetfilter.types [0] .data.length == 0&#34;

 Private Sub btnEdit_Click(sender As Object, e As EventArgs) Handles btnEdit.Click
    Dim formMain As New frmMain(CInt(Me.dgvCustomerInfo.Item(0, Me.dgvCustomerInfo.SelectedRows(0).Index).Value),
                               Me.dgvCustomerInfo.Item(1, Me.dgvCustomerInfo.SelectedRows(0).Index).Value,
                               Me.dgvCustomerInfo.Item(2, Me.dgvCustomerInfo.SelectedRows(0).Index).Value,
                               Me.dgvCustomerInfo.Item(3, Me.dgvCustomerInfo.SelectedRows(0).Index).Value)
    Me.Hide()
    'formMain.Hide()
    formMain.Show()