javascript - Highcharts 饼图在空时显示轮廓

Question

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

当图表为空时，企业不喜欢页面上 float 标签的外观。使用现有的图表对象，是否可以本质上制作图表轮廓并显示 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();
                }
            }
        },
...