使用 nvd3 的实时图表显示 NoData 可用答案

【问题标题】：RealTime chart using nvd3 says NoData Available使用 nvd3 的实时图表显示 NoData 可用
【发布时间】：2015-05-04 10:06:06
【问题描述】：

我正在使用socket.io 获取实时数据并使用 angularjs 绑定数据。有时会显示数据，否则会显示错误消息No Data available。

这是 HTML：

 <div ng-if="tab.displayType == 'info'">
          <div ng-repeat="content in tab.contents">
            <div ng-if="content.displayType == 'chart'">
                  <form name="userForm">
                    <h1>{{content.name}}</h1>                     
                      <div ng-if="displayData["TotalMemory"]">
                          <nvd3-line-chart
                                    data="displayData["TotalMemory"]"
                                    id="chart-{{tab.displayId}}-{{content.name}}"
                                    height="300"
                                    showXAxis="true"
                                    showYAxis="true"
                                    tooltips="true"
                                    interactive="true"
                                    useInteractiveGuideline="true"
                                   >
                                <svg></svg>
                            </nvd3-line-chart>
                        </div>
                    </form>                   
            </div>
          </div>
      </div>

App.js

               for (var datum in data){
                countxx++;
                if ($scope.displayData[datum]){
                    var valueObj = $scope.displayData[datum][0];
                    if (valueObj.key){
                        if (valueObj.values.length > 10) valueObj.values.splice(0, 1); 
                        valueObj.values.push([countxx++, data[datum]]);
                    }
                }
            }
             Object.keys($scope.displayData).forEach(function(key) {
                  if (!key) {
                     delete $scope.displayData[key];
                     }
                }); 
            console.log(angular.toJson($scope.displayData));
            console.log($scope.displayData);

数据在 app.js 上保持更新，这里是示例数据，

{"TotalMemory":[{"key":"TotalMemory","values":[[82,10]]}],"Freememory":[{"key":"Freememory","values":[[85,10]]}],"BufferSize":[{"key":"BufferSize","values":[[87,10]]}],"TotalSwapMemory":[{"key":"TotalSwapMemory","values":[[89,10]]}],"UsedSwapMemory":[{"key":"UsedSwapMemory","values":[[91,10]]}],"FeeSwapMemory":[{"key":"FeeSwapMemory","values":[[93,10]]}]}

【问题讨论】：

标签： angularjs html real-time nvd3.js

【解决方案1】：

This is the underlying NVD3 source 确定何时显示 noData 消息的条件：

// Display noData message if there's nothing to show.
if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {...}

要么

没有要显示的系列数据数组。
有一个数据数组，但它是空的。
有一个非空系列数组，但所有系列都有空的“值”数组（无数据点）。

在将返回的数据传递给图表模型之前尝试检查它。

【讨论】：