javascript - Chart.js 不显示/跳过标签

Question

我目前正在开发一个仪表板，并尝试向很多人显示分数。

这是我的 Chart.js 代码。

<script>
                            const labels = [
                                @foreach($all_staff as $staff)
                                    @php
                                    $i++;
                                    @endphp
                                '{{ $i }}',
                                @endforeach
                            ];
                            const data = {
                                labels: labels,
                                datasets: [{
                                    label: 'My First dataset',
                                    backgroundColor: 'rgb(255, 99, 132)',
                                    borderColor: 'rgb(255, 99, 132)',
                                    data: [0, 10, 5, 2, 20, 50],
                                }]

                            };
                            // </block:setup>

                            // <block:config:0>
                            const config = {
                                type: 'bar',
                                data,
                                options: {indexAxis: 'y',
                                    scaleShowValues: true,
                                    scales: {
                                        xAxes: [{
                                            ticks: {
                                                beginAtZero: true
                                            }
                                        }],
                                        yAxes: [{
                                            stacked: false,
                                            ticks: {
                                                autoSkip: false,
                                                beginAtZero: true,
                                                stepSize: 1,
                                            }
                                        }]
                                    }
                                }
                            };
                            // </block:config>

                            // === include 'setup' then 'config' above ===

                            var myChart = new Chart(
                                document.getElementById('myChart'),
                                config
                            );
                        </script>

现在就像标题所说，它没有显示所有标签: my chart

所以我尝试了这里的修复:https://github.com/chartjs/Chart.js/issues/2801

遗憾的是这些都不起作用。

任何帮助都会很棒!谢谢大家!

Answer 1

您的x和y轴配置是错误的，它们应该是对象而不是数组。

如果你这样做，它应该可以工作:

options: {
  scales: {
    x: {
      ticks: {
        beginAtZero: true
      }
    },
    y: {
      ticks: {
        autoSkip: false,
        beginAtZero: true,
        stepSize: 1
      }
    }
  }
}