chart.js - 多数据集chartjs

Question

我正在尝试使用 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) => e.record_date),
        datasets: [
          {
            label: this.monitoring_datas.map((e) => e.pest_scientific_name),
            data: this.monitoring_datas.map((e) => 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,
        }
      }

标签： chart.jsvue-chartjs