Chart.js 中的双轴 Y

Question

我想问一些关于chart.js 的问题。我已经使用 Chart.js 创建了仪表板，以便在用户界面上显示我的数据库，但是。我在 Chart.js 中的 Y 轴上有一个小错误，比如双重类别。这是我的仪表板图片 这是我的语法。

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

        
        var chartData = {}; // Menyiapkan objek untuk menyimpan data chart

        var myChart = new Chart(ctx, {
            type: 'bar', // Menggunakan chart jenis bar
            data: {
                datasets: [{
                    label: 'Statistik Karyawan',
                    data: [],
                    backgroundColor: ['skyblue'], // Warna untuk masing-masing kategori
                    borderWidth: 1
                }],
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: false,
                        ticks: {
                            callback: function(value, index, values) {
                                // Menampilkan label kategori sesuai index
                                return getCategoryLabel(value);
                            }
                        }
                    }
                },
                responsive: true, // Membuat chart responsif
                maintainAspectRatio: true // Mengatur rasio aspek chart
            }
        });

        // Fungsi untuk mendapatkan label kategori
        function getCategoryLabel(value) {
            // Menentukan label kategori sesuai nilai
            if (value >= 0 && value <= 1) {
                return 'Ringan';
            } else if (value >= 2 && value <= 3) {
                return 'Sedang';
            } else if (value >= 4) {
                return 'Berat';
            } else {
                return '';
            }
        }

        // Fungsi untuk mengupdate chart dengan data baru
        function updateChart(newData) {
            myChart.data.datasets[0].data = newData.allData;
            myChart.update();
        }

        // Fungsi untuk mengubah data chart saat terjadi perubahan
        function onDataChanged() {
            var newData = {
                allData: [0, 1, 2, 3, 4, 5, 6, 7]
            };

            // Menggunakan objek untuk melacak kategori yang sudah ditambahkan
            var addedCategories = {};

            // Memproses data baru dan menambahkannya ke chart
            newData.allData.forEach(function(value) {
                var categoryLabel = getCategoryLabel(value);

                // Menambahkan kategori ke chart hanya jika belum ada
                if (!addedCategories[categoryLabel]) {
                    addedCategories[categoryLabel] = true;
                    myChart.data.datasets[0].data.push(value);
                }
            });

            updateChart(newData);
        }

        onDataChanged();
    </script>

我对这个错误很困惑，请帮助我。

Answer 1

如果我正确理解你的问题，你在 y 轴上有“双类别”，因为你指定了以下内容

 ticks: {
         callback: function(value, index, values) {
         // Menampilkan label kategori sesuai index
         return getCategoryLabel(value);
                            }
                        }

但是 getCategoryLabel 函数返回是这样的（多次返回相同的值）：

function getCategoryLabel(value) {
            // Menentukan label kategori sesuai nilai
            if (value >= 0 && value <= 1) {
                return 'Ringan';
            } else if (value >= 2 && value <= 3) {
                return 'Sedang';
            } else if (value >= 4) {
                return 'Berat';
            } else {
                return '';
            }
        }

如果您希望 Y 轴显示数值，只需删除（或注释）刻度块，如下所示：

/*   
ticks: {
         callback: function(value, index, values) {
         // Menampilkan label kategori sesuai index
         return getCategoryLabel(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 = {}; // Menyiapkan objek untuk menyimpan data chart

        var myChart = new Chart(ctx, {
            type: 'bar', // Menggunakan chart jenis bar
            data: {
                datasets: [{
                    label: 'Statistik Karyawan',
                    data: [],
                    backgroundColor: ['skyblue'], // Warna untuk masing-masing kategori
                    borderWidth: 1
                }],
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: false,
                    /*   
                        ticks: {
                            callback: function(value, index, values) {
                                // Menampilkan label kategori sesuai index
                                return getCategoryLabel(value);
                            }
                        }
                   */

                    }

                },
                responsive: true, // Membuat chart responsif
                maintainAspectRatio: true // Mengatur rasio aspek chart
            }
        });

        // Fungsi untuk mendapatkan label kategori
        function getCategoryLabel(value) {
            // Menentukan label kategori sesuai nilai
            if (value >= 0 && value <= 1) {
                return 'Ringan';
            } else if (value >= 2 && value <= 3) {
                return 'Sedang';
            } else if (value >= 4) {
                return 'Berat';
            } else {
                return '';
            }
        }

        // Fungsi untuk mengupdate chart dengan data baru
        function updateChart(newData) {
            myChart.data.datasets[0].data = newData.allData;
            myChart.update();
        }

        // Fungsi untuk mengubah data chart saat terjadi perubahan
        function onDataChanged() {
            var newData = {
                allData: [1, 2, 3, 4, 5, 6, 7, 8]
            };

            // Menggunakan objek untuk melacak kategori yang sudah ditambahkan
            var addedCategories = {};

            // Memproses data baru dan menambahkannya ke chart
            newData.allData.forEach(function(value) {
                var categoryLabel = getCategoryLabel(value);

                // Menambahkan kategori ke chart hanya jika belum ada
                if (!addedCategories[categoryLabel]) {
                    addedCategories[categoryLabel] = true;
                    myChart.data.datasets[0].data.push(value);
                }
            });

            updateChart(newData);
        }

        onDataChanged();
    </script>