Chart.js - 如何更动态地编写这个 Javascript

Question

我是 Chart.js 的新手，一般也不太擅长编写 javascript。我目前已经拼凑了一个 4 折线图，但我想让代码更动态一点，这样如果传入的数据发生变化（比如出现第 5 类），JS 代码就可以选择那个无需重写即可。

chart.js 代码和 html

 const ctx = document.getElementById('myChart');

        const data = JSONinput;

        new Chart(
            ctx,
            {
                type: 'line',
                data: {
                    labels: data.map(row => row.DataPoints.map(p => p.LogDate))[0],
                    datasets: [
                        {
                            label: data.map(row => row.Name)[0],
                            data: data.map(row => row.DataPoints)[0].map(k => k.Score)
                        },
                        {
                            label: data.map(row => row.Name)[1],
                            data: data.map(row => row.DataPoints)[1].map(k => k.Score)
                        },
                        {
                            label: data.map(row => row.Name)[2],
                            data: data.map(row => row.DataPoints)[2].map(k => k.Score)
                        },
                        {
                            label: data.map(row => row.Name)[3],
                            data: data.map(row => row.DataPoints)[3].map(k => k.Score)
                        }
                    ]
                }
            };

<div>
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JSON 输入

[
    {
        "Name": "Red",
        "DataPoints": [
            {
                "LogDate": "2023-02-19T13:07:13.643",
                "Score": 478.5
            },
            {
                "LogDate": "2023-03-01T23:13:04.45",
                "Score": 594.0
            }
        ]
    },
    {
        "Name": "Blue",
        "DataPoints": [
            {
                "LogDate": "2023-02-19T13:07:13.643",
                "Score": 546.5
            },
            {
                "LogDate": "2023-03-01T23:13:04.45",
                "Score": 657.0
            }
        ]
    },
    {
        "Name": "Green",
        "DataPoints": [
            {
                "LogDate": "2023-02-19T13:07:13.643",
                "Score": 687.0
            },
            {
                "LogDate": "2023-03-01T23:13:04.45",
                "Score": 757.0
            }
        ]
    },
    {
        "Name": "Purple",
        "DataPoints": [
            {
                "LogDate": "2023-02-19T13:07:13.643",
                "Score": 518.0
            },
            {
                "LogDate": "2023-03-01T23:13:04.45",
                "Score": 668.0
            }
        ]
    }
]

此外，如果有一种缩短日期时间的方法，以便它只显示日期组件，那也很好，谢谢。

Answer 1

假设你的

data

和你想要的

dataset

一样长，你可以这样做；

const ctx = document.getElementById('myChart');

const data = JSONinput;

const datasets = data.map(row => ({
    label: row.Name,
    data: row.DataPoints.map(k => k.Score)
}));

new Chart(
    ctx,
    {
        type: 'line',
        data: {
  // The map on this line was not necessary
            labels: data[0].DataPoints.map(p => p.LogDate),
            datasets
        }
    });

传递到图表中的数据最终看起来像这样：

{
   "type":"line",
   "data":{
      "labels":[
         "2023-02-19T13:07:13.643",
         "2023-03-01T23:13:04.45"
      ],
      "datasets":[
         {
            "label":"Red",
            "data":[
               478.5,
               594
            ]
         },
         {
            "label":"Blue",
            "data":[
               546.5,
               657
            ]
         },
         {
            "label":"Green",
            "data":[
               687,
               757
            ]
         },
         {
            "label":"Purple",
            "data":[
               518,
               668
            ]
         }
      ]
   }
}