使用 nvd3 的实时图表显示没有数据可用

Question

我正在使用 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]]}]}

Answer 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) {...}

两者都

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

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

使用 nvd3 的实时图表显示没有数据可用

RealTime chart using nvd3 says NoData Available

html

real-time

angularjs

nvd3.js