Highcharts饼图显示空白时的轮廓

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();
                }
            }
        },
...