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

当轴没有数据时是否显示轴线和标题。

默认为true。

用法：

yAxis: {
  showEmpty: false,
  ...
}

Answer 2

没有一个选项有效，正如我的问题的第一个评论中提到的那样，手动工作。我不知道这是否是最干净的方式。

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

如果有更好/更清洁的方法，请告诉我！

Angular5：根据数据

2 个答案: