我有一些漂亮的图表、饼图和条形图。当没有真实数据时，我使用虚拟数据来炫耀。
我只想将虚拟图表保留为背景，“将其变灰”并显示消息“无数据可显示”。我不想用伪装成事实的虚假数据来误导。
不，这与 Highcharts 新发布的“无数据显示”功能不同，它什么都不显示，我想要预告片。
我已经尝试了很多，但我的 CSS 技能现在还不够好，他尴尬地承认。
- 两张图表
- 在一些叠加层中传达“没有数据可显示”
- 把图表放在后面作为很酷的预告片
感谢您的帮助。
最佳答案
您可以使用 ng-if 来完成此操作。查看文档，底部演示的示例演示了您要查找的内容。
复制自Official ngIf Docs :
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.11/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.11/angular-animate.min.js"></script>
</head>
<body>
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
I'm removed when the checkbox is unchecked.
</span>
</body>
</html>
和CSS
.animate-if {
background:white;
border:1px solid black;
padding:10px;
}
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
opacity:0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
opacity:1;
}
关于css - 禁用带有 CSS 覆盖和消息 "No data to show"的虚拟 highcharts 图。 AngularJS，没有 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21147068/