Chartjs ticks创建了一个奇怪的表

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

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

Data:    
[
{
    "name": "Finanzdienstleistungen, Finanzprodukte ...",
    "id": 1,
    "value": 80
},
{
    "name": "Urheberrechtsverletzungen und Wettbewerbs...",
    "id": 2,
    "value": 0
},
{
    "name": "Produktsicherheit und -konformität",
    "id": 3,
    "value": 0
},
{
    "name": "Verkehrssicherheit und Umweltschutz",
    "id": 4,
    "value": 0
},
]
const ctx = document.getElementById('myChart');
const data = JSON.parse(document.getElementById('data-statistic').textContent);
let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Incidents',
      data: data,
      indexAxis: 'y',
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ],
      borderWidth: 1,
    }]
  },
  options:{
    parsing: {
      yAxisKey: 'name',
      xAxisKey: 'value'
    },
    scales: {
      x: {
         ticks: {
            type: 'value',
            stepSize: 1
         }
      }
   },
  }
});````
2ekbmq32

2ekbmq321#

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

options:{
    indexAxis: 'y',
    parsing: {
      yAxisKey: 'name',
      xAxisKey: 'value'
    },
    ...

相关问题