Angular5中基于数据显示/隐藏Highcharts的Y轴

我来帮你搞定这个无数据时隐藏Y轴及标签的需求～因为angular-highcharts本质是对Highcharts的封装，所以我们可以直接用Highcharts的核心API来实现，下面给你两种实用方案：

方案一：动态控制Y轴的visible属性 #

在给图表绑定数据的逻辑里，先判断数据是否为空，再同步设置Y轴的可见状态，简单直接：

// 假设你的数据源是这个数组（可能为空）
const chartData = []; // 这里可以换成你的实际数据

// 给series赋值
this.chartConfig.series = chartData.length > 0 
  ? [{ data: chartData, pointRange: 24 * 3600 * 1000 }] 
  : [];

// 基于数据是否存在，修改Y轴可见性
this.chartConfig.yAxis = {
  ...this.chartConfig.yAxis, // 保留原有配置（min、max这些）
  visible: chartData.length > 0
};

// 最后创建图表实例
this.chart = new Chart(this.chartConfig);

方案二：监听图表事件实时调整 #

如果你的数据是异步加载或者会动态更新，可以通过图表的load和redraw事件来实时判断数据状态，自动切换Y轴显示：

this.chartConfig = {
  chart: {
    type: 'column',
    height: this.height,
    style: {fontFamily: 'inherit'},
    // 图表加载完成时触发
    events: {
      load: function() {
        const chart = this;
        // 判断是否有任何系列包含数据
        const hasData = chart.series.some(series => series.data.length > 0);
        // 切换Y轴可见性，第二个参数false表示不带动画
        chart.yAxis[0].setVisible(hasData, false);
      },
      // 数据更新导致图表重绘时触发
      redraw: function() {
        const chart = this;
        const hasData = chart.series.some(series => series.data.length > 0);
        chart.yAxis[0].setVisible(hasData, false);
      }
    }
  },
  // 其他原有配置...
  title: { text: null },
  exporting: { enabled: false },
  // ...剩下的配置
};

关于你之前show/hide事件报错的问题 #

你之前写的事件报错，大概率是因为在Angular中用普通function导致this指向混乱，换成箭头函数就能解决：

plotOptions: {
  series: {
    events: {
      hide: (event) => { // 改用箭头函数
        // 这里的this会指向你的组件实例，能正常访问组件属性
        console.log('系列被隐藏', event);
      },
      show: (event) => {
        console.log('系列被显示', event);
      }
    }
  }
}

不过这个事件是针对系列本身的显示/隐藏，和无数据时隐藏Y轴的需求关联不大，前面的两个方案更贴合你的需求哦～

内容的提问来源于stack exchange，提问作者hakuna