如何隐藏x轴chartjs上的值

Question

我正在使用chartjs 进行分散。 我声明了所有的值、类型类别。

我想从秤中隐藏一些值。

我的刻度是：0,5,10,15等 我不想显示值 5 和 15 的标签。

我该怎么办？

谢谢

我只能隐藏所有的值，但不能确定。

Answer 1

我相信您希望 Y 轴显示 stepSize=5 的刻度，但想要隐藏那些 5、15 等。

因此您可以通过回调指定刻度，如下所示：

   ticks: {
                            stepSize: 5, 
                            callback: function(value, index, values) {
                                return getCategoryLabel(value);
                            }
                        }

然后使用以下回调函数：

  function getCategoryLabel(value) {
            // Menentukan label kategori sesuai nilai
            if ( value %5 ==0 && value %10 !=0 ) {
                return '';
            } else {
                return value;
            }
        }

所以完整的代码将是这样的：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
        const canvas = document.getElementById('myChart');
        const ctx = canvas.getContext('2d');

        
        var chartData = {}; 

        var myChart = new Chart(ctx, {
            type: 'bar', 
            data: {
                datasets: [{
                    label: 'Test Bar Chart',
                    data: [],
                    backgroundColor: ['skyblue'], 
                    borderWidth: 1
                }],
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                      
                        ticks: {
                            stepSize: 5, 
                            callback: function(value, index, values) {
                                return getCategoryLabel(value);
                            }
                        }
                   

                    }

                },
                responsive: true, 
                maintainAspectRatio: true 
            }
        });

        function getCategoryLabel(value) {
            if ( value %5 ==0 && value %10 !=0 ) {
                return '';
            } else {
                return value;
            }
        }

        function updateChart(newData) {
            myChart.data.datasets[0].data = newData.allData;
            myChart.update();
        }

        function onDataChanged() {
            var newData = {
                allData: [3, 2, 5, 15, 20, 10, 22, 27, 3, 2, 5, 15]
            };

            var addedCategories = {};

            newData.allData.forEach(function(value) {
                var categoryLabel = getCategoryLabel(value);

                if (!addedCategories[categoryLabel]) {
                    addedCategories[categoryLabel] = true;
                    myChart.data.datasets[0].data.push(value);
                }
            });

            updateChart(newData);
        }

        onDataChanged();
    </script>