javascript - Angular5：根据数据在 Highcharts 中隐藏/显示 yAxis

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    
            }
        }
    }
}

标签： javascriptangularhighchartsshow-hideyaxis

Answer 1

在我看来，您正在寻找showEmpty：

showEmpty : 布尔值

轴无数据时是否显示轴线和标题。

默认为真。

用法：

yAxis: {
  showEmpty: false,
  ...
}