React Native用react-native-highcharts绘制实时加速度计数据遇空白图问题

我之前做实时传感器数据可视化时也踩过类似的坑，结合你的场景，咱们一步步排查修复：

1. 先确认加速度计数据是否正常获取 #

图表空白最基础的原因可能是根本没拿到传感器数据，先把这个环节排除：

import { Accelerometer } from 'react-native-sensors';

// 先在控制台打印数据，确认是否有输出
const accelerometerListener = Accelerometer.subscribe(({ x, timestamp }) => {
  console.log('加速度X轴数值:', x, '时间戳:', timestamp);
});

如果控制台没输出，先检查权限配置：

• iOS：在Info.plist中添加NSMotionUsageDescription字段，说明使用传感器的原因
• Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />（Android 10及以上版本需要）

2. 匹配Highcharts的时间序列数据格式 #

Highcharts的实时时间轴要求数据是[毫秒级时间戳, 数值]的数组格式，而react-native-sensors返回的timestamp是微秒级的，必须转换：

// 初始化存储数据的数组
let chartData = [];

Accelerometer.subscribe(({ x, timestamp }) => {
  // 把微秒转成毫秒，符合Highcharts的时间戳要求
  const msTimestamp = Math.floor(timestamp / 1000);
  // 按格式添加数据
  chartData.push([msTimestamp, x]);
  
  // 限制数据长度，避免内存占用过高（比如只保留最近100条）
  if (chartData.length > 100) {
    chartData.shift();
  }
  
  // 通过state更新触发图表重绘
  this.setState({ chartData });
});

3. 确保图表配置能正确触发重绘 #

react-native-highcharts需要通过更新配置来刷新图表，同时要注意几个关键配置：

import HighchartsReactNative from 'react-native-highcharts';

// 动态生成图表配置
const getChartConfig = (data) => ({
  chart: {
    type: 'spline',
    animation: true, // 开启实时动画效果
    height: 300 // 必须设置高度！否则容器会被压缩成空白
  },
  xAxis: {
    type: 'datetime', // 必须设为datetime类型，才能解析时间戳
    title: { text: '时间' }
  },
  yAxis: {
    title: { text: '加速度X轴数值' },
    min: -2, // 加速度计数值范围一般在-2g到2g，提前设置避免图表缩放异常
    max: 2
  },
  series: [{
    name: '实时加速度',
    data: data
  }]
});

// 在render中渲染图表
render() {
  return (
    <HighchartsReactNative
      options={getChartConfig(this.state.chartData)}
    />
  );
}

这里要重点注意：

• 必须给图表设置固定高度，react-native-highcharts的容器默认没有高度，会直接显示空白
• xAxis.type一定要设为datetime，否则时间戳会被当成普通数字处理，导致X轴显示异常

4. 排查依赖兼容性问题 #

如果以上步骤都没问题，可能是WebView的兼容性问题：

• React Native 0.60+已经移除了内置WebView，需要安装官方维护的react-native-webview：

  npm install react-native-webview --save
  

• Android端需要在AndroidManifest.xml中允许WebView加载本地资源：

  <application
    ...
    android:usesCleartextTraffic="true">
  

按这个流程排查下来，应该就能解决图表空白的问题了。

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