ChartJS 如何在Javascript中使用for循环填充数组

smtd7mpg  于 2023-03-08  发布在  Chart.js
关注(0)|答案(1)|浏览(176)

你好,我有这个代码与静态值,使图表中的图形,这是静态代码:

  1. async function outlayGraph() {
  2. const ctx = document.getElementById('outlayGraph').getContext('2d');
  3. const data = {
  4. labels: cashCreated_date,
  5. datasets: [{
  6. label: 'ALL',
  7. borderColor: 'rgb(255, 0, 0)',
  8. data: cashAlbanianLek
  9. },
  10. {
  11. label: 'GBP',
  12. borderColor: 'rgb(255, 0, 255)',
  13. data: cashBritishPound
  14. },
  15. {
  16. label: 'USD',
  17. borderColor: 'rgb(0, 153, 0)',
  18. data: cashAmericanDollar
  19. },
  20. {
  21. label: 'EUR',
  22. borderColor: 'rgb(0, 0, 255)',
  23. data: cashEuro
  24. },
  25. ]
  26. };
  27. const config = {
  28. type: 'line',
  29. data,
  30. options: {
  31. tooltips: {
  32. mode: 'index'
  33. }
  34. }
  35. };
  36. console.log(data);
  37. if (chart) {
  38. chart.data.labels = cashCreated_date;
  39. chart.data.datasets[0].data = cashAlbanianLek;
  40. chart.data.datasets[1].data = cashBritishPound;
  41. chart.data.datasets[2].data = cashAmericanDollar;
  42. chart.data.datasets[3].data = cashEuro;
  43. chart.update();
  44. } else {
  45. chart = new Chart(ctx, config);
  46. }
  47. }

现在我正在尝试将这段代码动态化,其中dataset的值来自api的Json响应。这是我到目前为止所做的代码:

  1. async function outlayGraph(label) {
  2. const context = document.getElementById('outlayGraph').getContext('2d');
  3. let data = 0;
  4. let configuration = 0;
  5. let allCurrency = [];
  6. for (i in label) {
  7. const item = label[i];
  8. allCurrency.push(item.name);
  9. }
  10. data = {
  11. labels: created_date,
  12. datasets: [
  13. {
  14. label: allCurrency[i],
  15. borderColor: generateRandomColor(),
  16. data: albanianLek
  17. },
  18. ]
  19. };
  20. console.log(data);
  21. configuration = {
  22. type: 'line',
  23. data,
  24. options: {
  25. tooltips: {
  26. mode: 'index'
  27. }
  28. }
  29. };
  30. if (charts) {
  31. charts.data.labels = created_date;
  32. charts.data.datasets[1].data = albanianLek;
  33. charts.data.datasets[2].data = britishPound;
  34. charts.data.datasets[3].data = americanDollar;
  35. charts.data.datasets[4].data = euro;
  36. charts.update();
  37. console.log("update");
  38. } else {
  39. charts = new Chart(context, configuration);
  40. console.log("create");
  41. }
  42. }

值来了,但有一个问题,我只得到最后一个值,我已经做了一个console.log,看看结构如何值在两个场景中来,
静态代码值:

  1. Object { labels: (12) […], datasets: (4) […] }
  2. datasets: Array(4) [ {…}, {…}, {…}, ]
  3. ​​
  4. 0: Object { label: "ALL", borderColor: "rgb(255, 0, 0)", data: (12) […] }
  5. ​​
  6. 1: Object { label: "GBP", borderColor: "rgb(255, 0, 255)", data: (12) […] }
  7. ​​
  8. 2: Object { label: "USD", borderColor: "rgb(0, 153, 0)", data: (12) […] }
  9. ​​
  10. 3: Object { label: "EUR", borderColor: "rgb(0, 0, 255)", data: (12) […] }
  11. ​​
  12. length: 4

动态代码值:

  1. Object { label: "EUR", borderColor: "#BB5889", data: (15) […] }

正如您所看到的,我只得到了最后一个值,我怀疑我的for循环出错了。

cwtwac6a

cwtwac6a1#

我把data改成了这个:

  1. data = {
  2. labels: created_date,
  3. datasets: allCurrency.map(currency => ({
  4. label: currency,
  5. borderColor: generateRandomColor(),
  6. data: albanianLek
  7. }))
  8. };

相关问题