Highcharts动态X轴范围下无数据模块的适配问题

方法一：手动检测可见数据并控制提示显示 #

通过监听X轴的afterSetExtremes事件（滑块调整触发）和图表的load事件（初始化时触发），遍历数据点判断当前X轴范围内是否有可见数据，手动调用NoData模块的显示/隐藏方法：

Highcharts.setOptions({
  lang: {
    noData: 'No data available'
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        const chart = this;
        const xAxis = chart.xAxis[0];
        const min = xAxis.min;
        const max = xAxis.max;
        let hasVisibleData = false;

        chart.series.forEach(series => {
          series.data.forEach(point => {
            if (point.x >= min && point.x <= max) {
              hasVisibleData = true;
            }
          });
        });

        hasVisibleData ? chart.hideNoData() : chart.showNoData();
      }
    }
  },
  xAxis: {
    type: 'datetime',
    min: 1335705200000, // 模拟无数据范围的最小值
    max: 1435705200000,
    events: {
      afterSetExtremes: function(e) {
        const chart = this.chart;
        const min = e.min;
        const max = e.max;
        let hasVisibleData = false;

        chart.series.forEach(series => {
          series.data.forEach(point => {
            if (point.x >= min && point.x <= max) {
              hasVisibleData = true;
            }
          });
        });

        hasVisibleData ? chart.hideNoData() : chart.showNoData();
      }
    }
  },
  series: [{
    data: [/* 你的全量时间序列数据 */]
  }],
  // 配置NoData模块样式
  noData: {
    style: {
      fontWeight: 'bold',
      fontSize: '12px',
      color: '#303030'
    }
  }
});

方法二：动态过滤数据并更新系列 #

每次滑块调整时，过滤出当前X轴范围内的数据，直接更新系列的data属性。当过滤后的数据为空时，NoData模块会自动触发显示：

// 假设originalData是你的全量时间序列数据
const originalData = [/* 全量数据 */];

Highcharts.setOptions({
  lang: {
    noData: 'No data available'
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  xAxis: {
    type: 'datetime',
    min: 1335705200000,
    max: 1435705200000,
    events: {
      afterSetExtremes: function(e) {
        const filteredData = originalData.filter(point => point.x >= e.min && point.x <= e.max);
        this.chart.series[0].setData(filteredData);
      }
    }
  },
  series: [{
    data: originalData.filter(point => point.x >= 1335705200000 && point.x <= 1435705200000)
  }],
  noData: {
    style: {
      fontWeight: 'bold',
      fontSize: '12px',
      color: '#303030'
    }
  }
});

注意事项 #

• 确保已正确初始化NoData模块：CDN引入需加载highcharts-no-data-to-display.js；模块化项目需导入highcharts/modules/no-data-to-display并注册。
• 方法一适合需要保留全量数据在图表中的场景（比如快速切换回有数据范围），方法二更轻量化，但每次调整都需要重新设置数据。

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