空图

Question

我目前在报表信息中心上成功显示了一个饼图。但是，当所有系列都为空时，业务请求保留了图表大纲并在中心显示“noData”消息。

当图表为空时，企业不喜欢页面上浮动标签的外观。使用现有的图表对象，是否可以基本上构建图表轮廓并显示noData消息？

Answer 1

可以添加自定义形状，例如圆圈，如果没有数据，将显示。使用图表的事件加载和重绘，您可以更新形状以适合图表并放在中心或在数据添加到图表时删除。

renderer.circle的API参考：http://api.highcharts.com/highcharts#Renderer.circle

示例：http://jsfiddle.net/v8n1159o/1/

chart: {
        events: {
            load: function () {
                var chart = this;
                if (!chart.hasData()) {
                    var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                        y = chart.plotHeight / 2 + chart.plotTop,
                        x = chart.plotWidth / 2 + chart.plotLeft;
                    chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                        fill: '#ddd',
                        stroke: 'black',
                            'stroke-width': 1
                    }).add();
                }
            },
            redraw: function () {
                var chart = this;
                if (chart.pieOutline && chart.pieOutline.element) {
                    if (chart.hasData()) {
                        chart.pieOutline.destroy();
                    } else {
                        var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                            y = chart.plotHeight / 2 + chart.plotTop,
                            x = chart.plotWidth / 2 + chart.plotLeft;
                        chart.pieOutline.attr({
                            cx: x,
                            cy: y,
                            r: r
                        });
                    }
                } else if(!chart.hasData()) {
                    var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                        y = chart.plotHeight / 2 + chart.plotTop,
                        x = chart.plotWidth / 2 + chart.plotLeft;
                    chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                        fill: '#ddd',
                        stroke: 'black',
                            'stroke-width': 1
                    }).add();
                }
            }
        },
...