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

Question

当没有数据显示时,有没有办法显示空图表而不是"无数据可用"消息？

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

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

];

谢谢!

Answer 1

你可以通过一个包含空数组的空数组来"破解"这个:

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

Answer 2

当你不想noData在图表上显示空白时,Lars提供的答案很有效.

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

如果使用数据填充图表,然后在清空数据后调用更新,则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文本而不覆盖现有数据.但就目前而言,这完美无缺.

希望它可以帮助一些人,试图达到同样的目的.

Answer 3

你可以noData在图表创建过程中调用并传递一个字符串:

(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'