英文:
Chart.js - How to write this Javascript more dynamically
问题
我是新手使用Chart.js，也没有很多JavaScript写作经验。我目前已经拼凑了一个包含4行的图表，但我想使代码更加动态，以便如果传入的数据发生变化（例如出现第5个类别），JavaScript代码能够自动适应而不必重新编写它。
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)
}
]
}
};
HTML 代码
<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
}
]
}
]
另外，如果有方法可以缩短日期时间，仅显示日期部分，那也很好，谢谢。
英文:
I am new to Chart.js and also not very experience at writing javascript generally. I currently have hacked together a 4-line chart but I'd like to make the code a bit more dynamic so that if the incoming data changes (say for example a 5th category was present) that the JS code would be able to pick that up without having to re-write it.
chart.js code & html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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)
}
]
}
};
<!-- language: lang-html -->
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- end snippet -->
JSON input
[
{
"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
}
]
}
]
Also if there's a way of shortening the datetime so that it only displays the date component then that'd be great too, thanks.
答案1
得分: 0
以下是翻译好的代码部分：
假设您的 `data` 与您的 `dataset` 一样长，您可以这样做：
```js
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: {
// 这一行上的映射不是必需的
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
]
}
]
}
}
<details>
<summary>英文:</summary>
Assuming your `data` is as long as you want your `dataset` is, you can do something like this;
```js
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
}
});
Data passed into the chart ends up looking like this:
{
"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
]
}
]
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论