分析chartJS Horizontal上的数据

2skhul33  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(222)
  1. const labels = ['s', 'a', 'd']
  2. const data = {
  3. labels: labels,
  4. datasets: [{
  5. label: 'Weekly Sales',
  6. data: [
  7. {products: { sales: [0, 5], id: 1 } },
  8. {products: { sales: [5, 10], id: 2 } },
  9. {products: { sales: [10, 15], id: 3 } },
  10. ],
  11. backgroundColor: [
  12. 'rgba(255, 26, 104, 0.2)',
  13. 'rgba(54, 162, 235, 0.2)',
  14. 'rgba(255, 206, 86, 0.2)',
  15. ],
  16. borderColor: [
  17. 'rgba(255, 26, 104, 1)',
  18. 'rgba(54, 162, 235, 1)',
  19. 'rgba(255, 206, 86, 1)',
  20. ],
  21. borderWidth: 1
  22. }]
  23. };
  24. // config
  25. const config = {
  26. type: 'bar',
  27. data,
  28. options: {
  29. parsing: {
  30. yAxisKey: 'products.sales',
  31. },
  32. indexAxis: 'y',
  33. scales: {
  34. y: {
  35. beginAtZero: true
  36. }
  37. }
  38. }
  39. };

我正在尝试使用Chartjs创建一个水平条形图,我在将数据放入图表时遇到了一些麻烦。enter image description here输出应该像图像中的这个。

v6ylcynt

v6ylcynt1#

您可以不定义parsing.yAxisKey,而按如下方式Map原始数据:

  1. data: rawData.map(o => o.products.sales),

请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个

相关问题