javascript - Highcharts Pie Charts Show Outline When Empty - Stack Overflow

admin管理员组

文章数量:1421287

I currently have a pie chart successfully displaying on my reporting dashboard. However, a business request was made to retain a chart outline and display the 'noData' message in the center when all series are empty.

The business did not like the look of a floating label on the page when the chart was empty. Using an existing chart object, would it be possible to essentially fabricate a chart outline and display a noData message?

I currently have a pie chart successfully displaying on my reporting dashboard. However, a business request was made to retain a chart outline and display the 'noData' message in the center when all series are empty.

The business did not like the look of a floating label on the page when the chart was empty. Using an existing chart object, would it be possible to essentially fabricate a chart outline and display a noData message?

• javascript
• charts
• highcharts

Share Improve this question Follow asked May 29, 2015 at 15:10 John BJohn B 16944 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It is possible to add custom shape, e.g. circle, that will be showing in case there is no data. Using chart's events load and redraw you can update shape to fit in chart and be placed in center or remove when data is added to chart.

API reference for renderer.circle: http://api.highcharts./highcharts#Renderer.circle

Example: http://jsfiddle/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();
                }
            }
        },
...

本文标签： javascriptHighcharts Pie Charts Show Outline When EmptyStack Overflow