在 line chartjs 中从线数组动态呈现数据集请给建议解决

如何解决在 line chartjs 中从线数组动态呈现数据集请给建议解决

数据如下

const data = [
   {name: 'A',value: [1,2,3,4,5,6,7]},{name: 'B',value: [11,23,15,17]},{name: 'C',value: [9,22,14,61,]

这是折线图代码片段

import { Line } from "react-chartjs-2";
import getRandomColor from "../functions";

export default function LineChartComponent({ data }) {
  const lines = data.map(val => {
    return [
      {
        label: val.name,data: val.value,fill: false,backgroundColor: getRandomColor(),borderColor: getRandomColor(),borderWidth: 3
      }
    ];
  });

  function getItem() {
    for (var i = 0; i < lines.length; i++) {
      return lines[i];
    }
  }

  const database = {
    labels: ["Sat","Sun","Mon","Tue","Wed","Thu","Fri"],datasets: getItem() //*** look here plz
  };

  return <Line data={database} height={300} width={400} />;
}

上面的代码段 //*** look here plz 我想动态呈现数据，但我的 getItem() 只呈现行数组的第一个元素。 在 datasets: here should be render all of lines[0],lines[1],lines[2] 中动态。

解决方法

似乎 data.map 返回数组内的数组...尝试改变这种方式：

import { Line } from "react-chartjs-2";
import getRandomColor from "../functions";

export default function LineChartComponent({ data }) {
  const datasets = data.map((val) => {
    return {
      label: val.name,data: val.value,fill: false,backgroundColor: getRandomColor(),borderColor: getRandomColor(),borderWidth: 3,};
  });

  const database = {
    labels: ["Sat","Sun","Mon","Tue","Wed","Thu","Fri"],datasets
  };

  return <Line data={database} height={300} width={400} />;
}