Angular5：Hide/Show 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);
            });
     }

我试过像这样添加 show/hide 事件，但即使对于相应的事件它也会抛出错误。

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

Answer 1

我觉得你在找 showEmpty:

showEmpty: Boolean

Whether to show the axis line and title when the axis has no data.

Defaults to true.

用法：

yAxis: {
  showEmpty: false,
  ...
}

Answer 2

None 的选项有效，正如我的问题的第一条评论中提到的那样，手动操作有效。我不知道这是否绝对是最干净的方法。

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

如果有 better/cleaner 方法可以做到这一点，请告诉我！