Chartjs ticks创建了一个奇怪的表

2hh7jdfx  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(204)

我想用Chart.js创建一个y轴条形图,现在我想把值改为stepsize 1,但是它创建了一个奇怪的图表,其中x和y上的键是名称,你能告诉我为什么吗?
步长为1时应如下所示:First
但是如果我设置了刻度,它看起来像这样:second
你好,詹尼克

  1. Data:
  2. [
  3. {
  4. "name": "Finanzdienstleistungen, Finanzprodukte ...",
  5. "id": 1,
  6. "value": 80
  7. },
  8. {
  9. "name": "Urheberrechtsverletzungen und Wettbewerbs...",
  10. "id": 2,
  11. "value": 0
  12. },
  13. {
  14. "name": "Produktsicherheit und -konformität",
  15. "id": 3,
  16. "value": 0
  17. },
  18. {
  19. "name": "Verkehrssicherheit und Umweltschutz",
  20. "id": 4,
  21. "value": 0
  22. },
  23. ]
  1. const ctx = document.getElementById('myChart');
  2. const data = JSON.parse(document.getElementById('data-statistic').textContent);
  3. let chart = new Chart(ctx, {
  4. type: 'bar',
  5. data: {
  6. datasets: [{
  7. label: 'Incidents',
  8. data: data,
  9. indexAxis: 'y',
  10. backgroundColor: [
  11. 'rgb(255, 99, 132)',
  12. 'rgb(54, 162, 235)',
  13. 'rgb(255, 205, 86)'
  14. ],
  15. borderWidth: 1,
  16. }]
  17. },
  18. options:{
  19. parsing: {
  20. yAxisKey: 'name',
  21. xAxisKey: 'value'
  22. },
  23. scales: {
  24. x: {
  25. ticks: {
  26. type: 'value',
  27. stepSize: 1
  28. }
  29. }
  30. },
  31. }
  32. });````
2ekbmq32

2ekbmq321#

这个问题与stepSize无关,但您希望有一个水平条,但您没有配置indexAxis选项。如果没有该选项,则是一个“垂直”条,X刻度是一个类别,而不是数字,如您所需。
添加indexAxis选项,如下所示:

  1. options:{
  2. indexAxis: 'y',
  3. parsing: {
  4. yAxisKey: 'name',
  5. xAxisKey: 'value'
  6. },
  7. ...

相关问题