Highcharts 饼图在空时显示轮廓

Question

我目前有一个饼图成功显示在我的报告仪表板上。但是，当所有系列为空时，提出了保留图表轮廓并在中心显示 'noData' 消息的业务请求。

企业不喜欢图表为空时页面上浮动标签的外观。使用现有的图表对象，是否可以从本质上制作图表轮廓并显示无数据消息？

Answer 1

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

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

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

Highcharts 饼图在空时显示轮廓

Highcharts Pie Charts Show Outline When Empty

javascript

charts

highcharts