Angular5: скрыть / показать yAxis в Highcharts на основе данных

Question

Я использую angular5 с библиотекой angular-highcharts для отображения графиков.Ниже приведен мой рабочий график, за исключением того, что ось Y не скрыта, когда нет данных для построения графика.Есть ли свойство или способ, которым я могу скрыть ось Y и ее метки, когда на графике нет данных для построения графика?

this.chartConfig = {
                    chart: {
                        type: 'column',
                        height: this.height,
                        style: {fontFamily: 'inherit'}
                    },
                    title: {
                        text: null
                    },
                    exporting: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    lang: {
                        noData: null
                    },                    
                    plotOptions: {
                        series: {
                            animation: true,
                            connectNulls: true,                            
                            marker: {
                                symbol: 'circle',
                                lineWidth: 1,
                                lineColor: '#fff'
                            }
                        },
                        column: {
                            states: {
                                hover: {
                                    enabled: false
                                }
                            },
                            pointPadding: 0,
                            borderWidth: 0.1,
                            pointWidth: 20,
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    xAxis: {
                        type: 'datetime',
                        tickInterval: 24 * 3600 * 1000,
                        labels: {
                            rotation: -60
                        }
                    },
                    yAxis: {
                        min: 0,
                        max: 150,
                        ceiling: 150,    
                        gridLineWidth: 0,                 
                        title: {
                            text: null
                        }
                    },
                   series: [],
                };
            //assign/bind the data here after the config is initialized
                this.chartConfig.series = [{
                        data: [{
                            x: Date.UTC(2012, 0, 1),
                            y: 1
                        }, {
                            x: Date.UTC(2012, 0, 8),
                            y: 3
                        }, {
                            x: Date.UTC(2012, 0, 15),
                            y: 2
                        }, {
                            x: Date.UTC(2012, 0, 22),
                            y: 4
                        }],
                        pointRange: 24 * 3600 * 1000
                    }];
                 //finally create the Chart object here with the config
                    this.chart = new Chart(this.chartConfig);
            });
     }

Я пытался добавить подобные события показа / скрытия, но это выдает ошибкидаже для соответствующих событий.

plotOptions: {
    series: {
        events: {
            hide: function (event) {
            //custom code here
            },
            show: function (event) {
            //custom code here    
            }
        }
    }
}

Answer 1

Ни одна из опций не сработала, как уже упоминалось в первом комментарии к моему вопросу, делая это вручную.Я не знаю, определенно это самый чистый способ сделать это или нет.

               //declare your flag to show/hide axis/labels globally
               let showYAxisLabels:boolean;

               this.chartConfig = {
                chart: {
                    type: 'column',
                    height: this.height,
                    style: {fontFamily: 'inherit'}
                },
                title: {
                    text: null
                },
                exporting: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                lang: {
                    noData: null
                },                    
                plotOptions: {
                    series: {
                        animation: true,
                        connectNulls: true,                            
                        marker: {
                            symbol: 'circle',
                            lineWidth: 1,
                            lineColor: '#fff'
                        }
                    },
                    column: {
                        states: {
                            hover: {
                                enabled: false
                            }
                        },
                        pointPadding: 0,
                        borderWidth: 0.1,
                        pointWidth: 20,
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 24 * 3600 * 1000,
                    labels: {
                        rotation: -60
                    }
                },
                yAxis: {
                    min: 0,
                    max: 150,
                    ceiling: 150,    
                    gridLineWidth: 0,                 
                    title: {
                        text: null
                    },
            //add labels here and check based on your flag to show/hide
                    labels: {
                            formatter: function () {
                                //check your flag here to show/hide labels
                                if (this.showYAxisLabels) {
                                    return this.value;
                                }
                            }
                        }
                },
               series: [],
            };
        //assign/bind the data here after the config is initialized
            this.chartConfig.series = [{
                    data: [{
                        x: Date.UTC(2012, 0, 1),
                        y: 1
                    }, {
                        x: Date.UTC(2012, 0, 8),
                        y: 3
                    }, {
                        x: Date.UTC(2012, 0, 15),
                        y: 2
                    }, {
                        x: Date.UTC(2012, 0, 22),
                        y: 4
                    }],
                    pointRange: 24 * 3600 * 1000
                }];
               //set your show/hide flag here based on your functionality
               this.showYAxisLabels = this.showHideYAxisLabels(this.chartConfig.series[0].data);//pass the respective data set based on your requirement
             //finally create the Chart object here with the config
                this.chart = new Chart(this.chartConfig);
        });
 } 

showHideYAxisLabels(data) {
        //write your custom logic based on your requirement, following works 
        //for my requirement
        if (_.filter(data, item => {
                return (item as any).y !== null;
            }).length > 0) {
            //show labels and hence axis
            return true;
        } else {
            //hide labels and hence axis
            return false;
        }
    }

Если есть лучший / более чистый способ сделать это, пожалуйста, дайте мне знать!

Answer 2

Мне кажется, что вы ищете showEmpty:

showEmpty : Boolean

Показывать ли ось линии и заголовка, когда на оси нет данных.

По умолчанию установлено значение true.

Использование:

yAxis: {
  showEmpty: false,
  ...
}