如何在React Chart.js折线图无数据时显示‘暂无数据’提示

方案一：使用Chart.js自定义插件 #

通过Chart.js的插件机制，在图表绘制阶段自动判断数据状态，无数据时在图表中心绘制提示文本，无需额外DOM元素。

直接修改你的组件配置，添加自定义插件：

<Line
  chartData={{
    labels: [],
    datasets: [
      {
        id: 1,
        label: 'Users',
        data: dauData,
        borderColor: '#86C6FF',
        backgroundColor: '#86C6FF',
        tension: 0.4,
      },
    ],
  }}
  options={{
    plugins: {
      legend: {
        display: false,
      },
    },
    // 注册自定义空数据提示插件
    plugins: [
      {
        id: 'emptyDataHint',
        afterDraw: (chart) => {
          // 判断是否无有效数据
          const hasValidData = chart.data.labels.length > 0 
            || chart.data.datasets.some(ds => ds.data.filter(item => item != null).length > 0);
          
          if (!hasValidData) {
            const { ctx, chartArea: { left, top, width, height } } = chart;
            ctx.save();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = '#999';
            ctx.font = '16px sans-serif';
            ctx.fillText('暂无数据', left + width / 2, top + height / 2);
            ctx.restore();
          }
        }
      }
    ]
  }}
/>

方案二：React条件渲染叠加提示文本 #

利用React的条件渲染逻辑，在图表容器内叠加一个绝对定位的提示层，无数据时显示，实现成本更低。

给图表套一个相对定位的容器，再添加条件渲染的提示：

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Line
    chartData={{
      labels: [],
      datasets: [
        {
          id: 1,
          label: 'Users',
          data: dauData,
          borderColor: '#86C6FF',
          backgroundColor: '#86C6FF',
          tension: 0.4,
        },
      ],
    }}
    options={{
      plugins: {
        legend: {
          display: false,
        },
      },
    }}
  />
  {/* 当dauData为空或无有效数据时显示提示 */}
  {(!dauData || dauData.every(item => item == null)) && (
    <div style={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      color: '#999',
      fontSize: '16px'
    }}>
      暂无数据
    </div>
  )}
</div>

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