React中Highcharts的Series无法读取数据渲染图表问题求助

我在项目中使用Highcharts时遇到了Series相关问题：编写了生成Series的函数，但Series无法读取数据并绘制图表。以下是我的Series函数代码：

const series = useMemo(() => {
    const calcvolumeBuy = [];
    const calcvolumeSell = [];

    if (data) {
      for (let i = 1; i < 5 + 1; i += 1) {
        const obj = {};
        obj.price = data['qd' + i];
        obj.volume = data['po' + i];
        calcvolumeBuy?.push(obj);
      }
      for (let i = 1; i < 5 + 1; i += 1) {
        const obj = {};
        obj.price = data['po' + i];
        obj.volume = data['qo' + i];
        calcvolumeSell?.push(obj);
      }
    }
    return [
      {
        name: 'buy',
        color: '#03a7a8',
        data: calcvolumeBuy,
      },
      {
        name: 'sell',
        color: '#fc5857',
        data: calcvolumeSell,
      },
    ];
  }, [data]);

我是这样使用这个series的：

series: series,

问题原因及解决方法 #

Highcharts 默认无法直接识别你当前使用的 {price, volume} 对象格式的数据点，它需要的是数组格式（如 [x值, y值]），或者明确指定数据点的x/y字段映射。

方案1：将对象转换为数组格式 #

修改生成数据的逻辑，把每个对象转换成 [price, volume] 的数组：

const series = useMemo(() => {
    const calcvolumeBuy = [];
    const calcvolumeSell = [];

    if (data) {
      for (let i = 1; i < 5 + 1; i += 1) {
        // 转换为 [price, volume] 数组
        calcvolumeBuy.push([data['qd' + i], data['po' + i]]);
      }
      for (let i = 1; i < 5 + 1; i += 1) {
        calcvolumeSell.push([data['po' + i], data['qo' + i]]);
      }
    }
    return [
      {
        name: 'buy',
        color: '#03a7a8',
        data: calcvolumeBuy,
      },
      {
        name: 'sell',
        color: '#fc5857',
        data: calcvolumeSell,
      },
    ];
  }, [data]);

方案2：配置Highcharts识别自定义字段 #

如果你想保留对象格式，可以在series配置中通过 keys 属性指定x和y对应的字段名：

const series = useMemo(() => {
    const calcvolumeBuy = [];
    const calcvolumeSell = [];

    if (data) {
      for (let i = 1; i < 5 + 1; i += 1) {
        const obj = {};
        obj.price = data['qd' + i];
        obj.volume = data['po' + i];
        calcvolumeBuy.push(obj);
      }
      for (let i = 1; i < 5 + 1; i += 1) {
        const obj = {};
        obj.price = data['po' + i];
        obj.volume = data['qo' + i];
        calcvolumeSell.push(obj);
      }
    }
    return [
      {
        name: 'buy',
        color: '#03a7a8',
        data: calcvolumeBuy,
        // 指定x对应price，y对应volume
        keys: ['x', 'y'],
      },
      {
        name: 'sell',
        color: '#fc5857',
        data: calcvolumeSell,
        keys: ['x', 'y'],
      },
    ];
  }, [data]);

额外检查点 #

• 确认 data 变量确实包含有效数值，没有 undefined 或 null 的情况，可以在useMemo里加个console.log打印data和生成后的calcvolumeBuy/calcvolumeSell，排查数据是否正确生成。
• 确认你使用的Highcharts图表类型（比如柱状图、折线图等）支持当前的数据格式，部分特殊图表类型需要特定的数据结构。

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