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

mitkmikd  于 2023-03-12  发布在  Chart.js
关注(0)|答案(1)|浏览(143)

我是Chart.js的新手,也没有编写javascript的经验。我目前已经编写了一个4行图表,但我想让代码更动态一点,这样如果输入的数据发生变化(比如出现了第5个类别),JS代码就可以接收到,而不必重写。

Chart.js代码和html

  1. const ctx = document.getElementById('myChart');
  2. const data = JSONinput;
  3. new Chart(
  4. ctx,
  5. {
  6. type: 'line',
  7. data: {
  8. labels: data.map(row => row.DataPoints.map(p => p.LogDate))[0],
  9. datasets: [
  10. {
  11. label: data.map(row => row.Name)[0],
  12. data: data.map(row => row.DataPoints)[0].map(k => k.Score)
  13. },
  14. {
  15. label: data.map(row => row.Name)[1],
  16. data: data.map(row => row.DataPoints)[1].map(k => k.Score)
  17. },
  18. {
  19. label: data.map(row => row.Name)[2],
  20. data: data.map(row => row.DataPoints)[2].map(k => k.Score)
  21. },
  22. {
  23. label: data.map(row => row.Name)[3],
  24. data: data.map(row => row.DataPoints)[3].map(k => k.Score)
  25. }
  26. ]
  27. }
  28. };
  1. <div>
  2. <canvas id="myChart"></canvas>
  3. </div>
  4. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JSON输入

  1. [
  2. {
  3. "Name": "Red",
  4. "DataPoints": [
  5. {
  6. "LogDate": "2023-02-19T13:07:13.643",
  7. "Score": 478.5
  8. },
  9. {
  10. "LogDate": "2023-03-01T23:13:04.45",
  11. "Score": 594.0
  12. }
  13. ]
  14. },
  15. {
  16. "Name": "Blue",
  17. "DataPoints": [
  18. {
  19. "LogDate": "2023-02-19T13:07:13.643",
  20. "Score": 546.5
  21. },
  22. {
  23. "LogDate": "2023-03-01T23:13:04.45",
  24. "Score": 657.0
  25. }
  26. ]
  27. },
  28. {
  29. "Name": "Green",
  30. "DataPoints": [
  31. {
  32. "LogDate": "2023-02-19T13:07:13.643",
  33. "Score": 687.0
  34. },
  35. {
  36. "LogDate": "2023-03-01T23:13:04.45",
  37. "Score": 757.0
  38. }
  39. ]
  40. },
  41. {
  42. "Name": "Purple",
  43. "DataPoints": [
  44. {
  45. "LogDate": "2023-02-19T13:07:13.643",
  46. "Score": 518.0
  47. },
  48. {
  49. "LogDate": "2023-03-01T23:13:04.45",
  50. "Score": 668.0
  51. }
  52. ]
  53. }
  54. ]

另外,如果有一种缩短日期时间的方法,使它只显示日期组件,那么这将是伟大的太,谢谢。

3bygqnnd

3bygqnnd1#

假设你的data和你想要的dataset一样长,你可以这样做;

  1. const ctx = document.getElementById('myChart');
  2. const data = JSONinput;
  3. const datasets = data.map(row => ({
  4. label: row.Name,
  5. data: row.DataPoints.map(k => k.Score)
  6. }));
  7. new Chart(
  8. ctx,
  9. {
  10. type: 'line',
  11. data: {
  12. // The map on this line was not necessary
  13. labels: data[0].DataPoints.map(p => p.LogDate),
  14. datasets
  15. }
  16. });

传递到图表中的数据最终显示为:

  1. {
  2. "type":"line",
  3. "data":{
  4. "labels":[
  5. "2023-02-19T13:07:13.643",
  6. "2023-03-01T23:13:04.45"
  7. ],
  8. "datasets":[
  9. {
  10. "label":"Red",
  11. "data":[
  12. 478.5,
  13. 594
  14. ]
  15. },
  16. {
  17. "label":"Blue",
  18. "data":[
  19. 546.5,
  20. 657
  21. ]
  22. },
  23. {
  24. "label":"Green",
  25. "data":[
  26. 687,
  27. 757
  28. ]
  29. },
  30. {
  31. "label":"Purple",
  32. "data":[
  33. 518,
  34. 668
  35. ]
  36. }
  37. ]
  38. }
  39. }
展开查看全部

相关问题