Блог

Я пытаюсь создать линейный график с помощью ChartJS. Однако я не могу динамически использовать многодатазеты. Эти данные генерируются случайным образом каждый день. Таким образом, в один и тот же день у меня могут быть два разных типа данных для одного и того же насекомого. Итак, из этого формата данных JSON мне нужно сгенерировать линейную диаграмму, на которой каждое насекомое имеет свою информацию по оси Y.

Возможно, я неправильно группирую данные. Но мы поняли, что необходимо иметь несколько наборов данных.

 {  "erro": false,  "pest_reports": [  {  "id": 2,  "record_date": "2021-10-01T03:00:00.000Z",  "amount": 3,  "damage": 11,  "observation": null,  "sampling_type_id": 2,  "pest_size_id": 2,  "insect_stage_id": 2,  "pest_id": 2,  "phenological_state_id": 2,  "tenant_account_id": 1,  "partition_id": 1,  "field_id": 1,  "area_id": 1,  "farm_project_id": 1,  "farm_property_id": 1,  "created_at": "2021-10-27T13:17:36.454Z",  "updated_at": "2021-10-27T13:17:36.454Z",  "pest_scientific_name": "Myochrous armatus (Baly, 1865) ",  "phenological_state_description": "Cotilédones completamente abertos ",  "sampling_type_description": "Armadilha",  "pest_size_description": "Pequeno(a)",  "insect_stage_description": "Adulto"  },  {  "id": 3,  "record_date": "2021-10-05T03:00:00.000Z",  "amount": 6,  "damage": 2,  "observation": null,  "sampling_type_id": 2,  "pest_size_id": 2,  "insect_stage_id": 2,  "pest_id": 2,  "phenological_state_id": 2,  "tenant_account_id": 1,  "partition_id": 1,  "field_id": 1,  "area_id": 1,  "farm_project_id": 1,  "farm_property_id": 1,  "created_at": "2021-10-27T13:18:13.914Z",  "updated_at": "2021-10-27T13:18:13.914Z",  "pest_scientific_name": "Myochrous armatus (Baly, 1865) ",  "phenological_state_description": "Cotilédones completamente abertos ",  "sampling_type_description": "Armadilha",  "pest_size_description": "Pequeno(a)",  "insect_stage_description": "Adulto"  },  {  "id": 4,  "record_date": "2021-10-13T03:00:00.000Z",  "amount": 6,  "damage": 2,  "observation": null,  "sampling_type_id": 1,  "pest_size_id": 2,  "insect_stage_id": 5,  "pest_id": 5,  "phenological_state_id": 3,  "tenant_account_id": 1,  "partition_id": 1,  "field_id": 1,  "area_id": 1,  "farm_project_id": 1,  "farm_property_id": 1,  "created_at": "2021-10-27T13:19:08.201Z",  "updated_at": "2021-10-27T13:19:08.201Z",  "pest_scientific_name": "Elasmopalpus lignosellus (Zeller, 1848) ",  "phenological_state_description": "Folhas unifolioladas completamente desenvolvidas",  "sampling_type_description": "Visual",  "pest_size_description": "Pequeno(a)",  "insect_stage_description": "Ninfa"  },  {  "id": 1,  "record_date": "2021-10-26T09:00:00.000Z",  "amount": 1,  "damage": 0,  "observation": null,  "sampling_type_id": 1,  "pest_size_id": 1,  "insect_stage_id": 2,  "pest_id": 3,  "phenological_state_id": 1,  "tenant_account_id": 1,  "partition_id": 1,  "field_id": 1,  "area_id": 1,  "farm_project_id": 1,  "farm_property_id": 1,  "created_at": "2021-10-25T11:54:58.847Z",  "updated_at": "2021-10-25T11:55:19.455Z",  "pest_scientific_name": "Phyllophaga cuyabana (Moser, 1918) ",  "phenological_state_description": "Cotilédones acima da superfície do solo ",  "sampling_type_description": "Visual",  "pest_size_description": "Nenhum",  "insect_stage_description": "Adulto"  }  ] }  

 datacollection: {  labels: this.monitoring_datas.map((e) =gt; e.record_date),  datasets: [  {  label: this.monitoring_datas.map((e) =gt; e.pest_scientific_name),  data: this.monitoring_datas.map((e) =gt; e.amount),  fill: false,  backgroundColor: "rgb(4, 209, 158)",  borderColor: "rgba(4, 209, 158, 0.2)",  }  ],  },  options: {  responsive: true,  plugins: {  title: {  display: true,  text: "Temperatura Diária",  },  },  scales: {  yAxes: [  {  display: true,  scaleLabel: {  display: true,  labelString: "Temperatura (˚C)",  },  suggestedMin: -10,  suggestedMax: 50,  },  ],  xAxes: [  {  display: true,  type: "time",  scaleLabel: {  display: true,  labelString: "Data da observação",  },  time: {  unit: "day",  displayFormats: {  day: "DD/MM/yy",  },  },  },  ],  },  legend: {  display: true,  }  }