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

【问题标题】：NVD3 - Showing empty chart instead of noData messageNVD3 - 显示空图表而不是 noData 消息
【发布时间】：2013-07-03 21:14:25
【问题描述】：

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

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

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

];

谢谢！

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

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

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

【讨论】：

我们可以有自定义消息而不是没有图表或“无可用数据”消息吗？
我认为您需要修改源代码。
我应该修改 scatter.js 吗？但我没有在那里找到任何“无可用数据”消息
这可能在不同的文件中。您可能想就此提出一个新问题。
请在此处查看我的问题 - stackoverflow.com/questions/23582292/…

【解决方案2】：

当您不想在图表上显示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 文本而不覆盖现有数据。但现在这完美无缺。

希望它对尝试实现相同目标的人有所帮助。

【讨论】：

【解决方案3】：

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

（咖啡脚本）

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'

【讨论】：