Question

这是将数据从对象映射到数组以在绘图图中使用

setDataTable(args,legend) {
    //const { legend } = this.state;
    let checkDate = '';
    const datasets = Object.keys(legend).map((l) => {
      const data = legend[l];
      return {
        data: args.map(dataset => roughScale(dataset[l])),
        borderColor: data.color || getRandomColor(),
        backgroundColor: 'transparent',
        label: data.text,
        lineTension: 0,
        hidden: !data.show,
        fill:false
      };
    });
    return {
      datasets,
      labels:this.getArrayTime(),
    };
  } 


 This is the generate ArrayTime in one day for use in label

 getArrayTime () {
    let items = [];
    new Array(24).fill().forEach((acc, index) => {
      items.push(moment( {hour: index} ).format('HH:mm'));
      //items.push(moment({ hour: index, }).format('h:mm A'));
    })
    return items;
  }

这是我的示例数据

[{observationDateTime:"24/09/2018 10:40"
weight:"40"
height:"154"
temperature:"97"
BPSystolic:"197"
BPDiastolic:"400"
pulse:"890"
respiration:"20"
bmi:"16.866"
headCircumference:"6"
chestCircumferenceInspiration:"8"
waist:"9"
O2Saturation:"9"
bsa:"1.31"
id:2},{observationDateTime:"24/09/2018 16:30"
weight:"35"
height:"154"
temperature:"98"
BPSystolic:"198"
BPDiastolic:"410"
pulse:"900"
respiration:"18"
bmi:"14.758"
headCircumference:"5"
chestCircumferenceInspiration:"7"
waist:"8"
O2Saturation:"8"
bsa:"1.22"
id:1}]

当通过setDataTable时，它将是一个仅包含对象值的组，例如，如果我想绘制有关温度的图形，我将得到[97,98]

这是我的结果。现在它从带有索引的配对数据绘制图形 https://imgur.com/1HDZ8Eu

我需要将图形中的该点移至10:00 17:00之间如您在我的示例数据中看到的，时间是10:40和16:30

我如何使用React Chart.s-2绘制图形

0 个答案: