d3.js - NVD3 - 显示空图表而不是 noData 消息

Question

当没有数据要显示时，有没有办法显示一个空图表而不是“无可用数据”消息？

http://jsfiddle.net/sammla/pYWkD/2/

data2 = [ 
    { 
      "key" : "A key" , 
      "values" : []
    }

];

谢谢！

Answer 1

您可以通过拥有一个包含空数组的空数组来“破解”它：

data2 = [ 
  { 
    "key" : "A key" , 
    "values" : [[]]
  }
];

Answer 2

you can call noData and pass a string during the chart creation:

(coffeescript)

self.chart = nv.models.lineChart()
               .margin  left: 100, right: 100
               .useInteractiveGuideline true
               .transitionDuration 150
               .showLegend true
               .showYAxis true
               .showXAxis true
               .noData 'no data, there is'

Answer 3

当您不想noData在图表上显示消息为空时，Lars 提供的答案效果很好。

最近我的图表内容被动态加载。我发现了一个与此类似的问题Updating with no data does not clear old data from the chart.

如果图表填充了数据，然后在清空数据后调用 update，则noData文本将覆盖现有数据。

考虑是否应从图表中清除当前数据，因为同时查看两者可能会造成混淆。

我无法找到一个干净的解决方案，所以这就是我为克服它所做的事情：

使用 Lars 答案清空图表：

data2 = [{
    "key" : "A key",
    "values" : [[]]
}]; 

然后添加下面的代码。

d3.select('#chart svg').append("text")
        .attr("x", "235")
        .attr("y", "35")
        .attr("dy", "-.7em")
        .attr("class", "nvd3 nv-noData")
        .style("text-anchor", "middle")
        .text("My Custom No Data Message");

即使我正在寻求适当的解决方案，以显示 noData 文本而不覆盖现有数据。但现在这完美无缺。

希望它可以帮助一些人，试图实现同样的目标。