在实际开发场景中,我们常会遇到一个模块写好了,但是实际上线后这部分可能没有数据或者是空数据。如果这个时候我们不做任何处理的话,那么用户只会看到一个光秃秃的图表,但是里边没有内容被渲染出来。这种情况下用户体验极差,因此我们要适当做一些优化。
一种方法是,当没有数据可以显示时,在对应的模块中央显示一行提示文字,比如“找不到数据”之类的。
那么,如何设置这个没有数据的提示呢?
数据判空+innerHtml
一种方法是,在Ajax等数据请求拿到数据后,进行判空,如果和图表对应的数据为空时,利用 innerHtml 等类似操作,将自定义的提示文本插入到指定空图表中。
利用chart提供的API
现在的许多第三方图表绘制插件都提供了在没有数据时显示提示文字的API,比如highchart的配置项中有一项 noData 的属性,开启后可以配置显示空数据的提示文字。