如何在Charts JS中获取变量数据集?

mqkwyuun  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(150)

我的数据集是可变数量的。意味着它们可以是2、4或6等。所以我需要在图表上绘制这些数据集。对于每个数据集的手动绘图,它工作正常:

  1. var options = {
  2. type: 'line',
  3. data: {
  4. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  5. datasets: [
  6. {
  7. label: '# of Votes',
  8. data: [12, 19, 3, 5, 2, 3],
  9. borderWidth: 1
  10. },
  11. {
  12. label: '# of Points',
  13. data: [7, 11, 5, 8, 3, 7],
  14. borderWidth: 1
  15. }
  16. ]
  17. },
  18. options: {
  19. scales: {
  20. yAxes: [{
  21. ticks: {
  22. reverse: false
  23. }
  24. }]
  25. }
  26. }
  27. }
  28. var ctx = document.getElementById('chartJSContainer').getContext('2d');
  29. new Chart(ctx, options);

如果我这样做:

  1. var options = {
  2. type: 'line',
  3. data: {
  4. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  5. datasets: ()=>{ [ return {label: '# of Votes',data: [12, 19, 3, 5, 2, 3],borderWidth:1}
  6. ]}
  7. },
  8. options: {
  9. scales: {
  10. yAxes: [{
  11. ticks: {
  12. reverse: false
  13. }
  14. }]
  15. }
  16. }
  17. }
  18. var ctx = document.getElementById('chartJSContainer').getContext('2d');
  19. new Chart(ctx, options);

它不工作。我以前见过像我为ticks编写的函数。但它在datasets上不起作用。我需要做的是遍历一个列表,并将几个数据集从其中生成一个数据集数组(代码不在这里写)。如果一个函数可以被创建,那么我可以很容易地为它编写代码来迭代)。请帮帮我先谢谢你了。

ss2ws0br

ss2ws0br1#

你可以创建一个自调用函数,它将返回一个像这样的数据集数组。

  1. const options = {
  2. type: 'line',
  3. data: {
  4. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  5. datasets: (() => {
  6. return [{
  7. label: '# of Votes',
  8. data: [12, 19, 3, 5, 2, 3],
  9. borderWidth: 1
  10. }];
  11. })()
  12. },
  13. options: {
  14. scales: {
  15. yAxes: [{
  16. ticks: {
  17. reverse: false
  18. }
  19. }]
  20. }
  21. }
  22. };
  23. var ctx = document.getElementById('chartJSContainer').getContext('2d');
  24. new Chart(ctx, options);

或者你可以在外部创建一个函数,它将返回数据集数组,并像下面这样调用它

  1. datasets: getDataset()
展开查看全部

相关问题