Chart JS 极地区域曲线标签

Question

我正在开发一个 Web 项目，使用 Chart.js 创建一个 PolarArea 图表，该图表根据下拉菜单中选定的类动态更新。我遇到了标签是动态的问题，但我需要它是静态的

const subjects = {
    5: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Історія", "Математика", "Природа", "ІТ", "Фізкультура", "Мистецтво"],
    6: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Історія", "Математика", "Природа", "ІТ", "Географія", "Фізкультура", "Мистецтво"],
    7: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Всесвіт. історія", "Історія Укр.", "Алгебра", "Геометрія", "ІТ", "Біологія", "Географія", "Фізика", "Хімія", "Здоров'я", "Мистецтво", "Фізкультура"],
    8: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Всесвіт. історія", "Історія Укр.", "Алгебра", "Геометрія", "ІТ", "Біологія", "Географія", "Фізика", "Хімія", "Здоров'я", "Мистецтво", "Фізкультура"],
    9: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Всесвіт. історія", "Історія Укр.", "Алгебра", "Геометрія", "ІТ", "Біологія", "Географія", "Фізика", "Хімія", "Здоров'я", "Мистецтво", "Фізкультура"],
    10: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Всесвіт. історія", "Історія Укр.", "Алгебра", "Геометрія", "ІТ", "Біологія", "Географія", "Фізика", "Хімія", "Здоров'я", "Мистецтво", "Фізкультура"],
    11: ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Всесвіт. історія", "Історія Укр.", "Алгебра", "Геометрія", "ІТ", "Біологія", "Географія", "Фізика", "Хімія", "Здоров'я", "Мистецтво", "Фізкультура"]
};


const data = {
    labels: [],
    datasets: [{
        data: [],
        backgroundColor: [],
        borderColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
    }]
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        
        layout: {
            padding: {
                top: 30,
                bottom: 30,
                left: 30,
                right: 30
            }
        },
        scales: {
            r: {
                min: 1, // мінімальне значення
                max: 12,
                ticks: {
                    stepSize: 1, 
                    color: '#000', // колір поділок
                    backdropColor: 'rgba(255,255,255,0.8)', // фон під поділками
                    font: {
                        size: 14 // розмір шрифту для поділок
                    }
                },
                grid: {
                    color: '#888', // колір сітки
                    circular: true
                },
            }
        },
        plugins: {
            legend: {
                display: false
            },
            labels: {
                size: 1,
                render: 'label',
                arc: true,
                fontColor: '#000',
                position: 'outside'
            }
        }
    }
});

我已经把所有东西都绑好了，但没有任何效果

Answer 1

要使 PolarArea 图表的标签静态，您应该修改 data.labels 数组以包含您想要保持不变的标签，无论从下拉菜单中选择什么类。

以下是如何调整代码以保持标签静态，同时仍允许数据动态更新：

将标签设置在下拉菜单更改事件之外，以便它们保持不变。 当选择不同的类时，仅更新图表的数据属性。

const subjects = {
    5: [5, 8, 3, 4, 7, 6, 9, 2, 5, 3], // Example data for each subject
    6: [6, 7, 5, 8, 4, 5, 6, 3, 4, 2, 6],
    7: [8, 9, 4, 6, 7, 5, 3, 4, 8, 9, 6, 7, 3, 4, 6],
    8: [7, 6, 5, 8, 9, 4, 6, 7, 3, 8, 6, 7, 4, 6, 5],
    9: [9, 6, 8, 7, 4, 5, 3, 6, 7, 9, 8, 6, 5, 3, 4],
    10: [5, 4, 6, 9, 8, 7, 4, 6, 7, 5, 8, 6, 7, 4, 6],
    11: [6, 5, 7, 8, 9, 4, 3, 6, 7, 5, 9, 8, 6, 7, 4]
};

// Static labels
const staticLabels = ["Укр. мова", "Укр. літ.", "Заруб. літ.", "Англ. мова", "Історія", "Математика", "Природа", "ІТ", "Географія", "Фізика", "Хімія", "Фізкультура"];

const data = {
    labels: staticLabels, // Set static labels here
    datasets: [{
        data: [], // This will be updated dynamically
        backgroundColor: [], // Add custom colors if needed
        borderColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
    }]
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: {
                top: 30,
                bottom: 30,
                left: 30,
                right: 30
            }
        },
        scales: {
            r: {
                min: 1, 
                max: 12,
                ticks: {
                    stepSize: 1, 
                    color: '#000',
                    backdropColor: 'rgba(255,255,255,0.8)', 
                    font: {
                        size: 14
                    }
                },
                grid: {
                    color: '#888', 
                    circular: true
                },
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Update chart data dynamically based on the selected class
function updateChartData(classLevel) {
    myChart.data.datasets[0].data = subjects[classLevel]; // Update data only
    myChart.update(); // Re-render the chart with the new data
}

// Assuming you have a dropdown menu where you select the class level
document.getElementById('classSelect').addEventListener('change', function () {
    const selectedClass = this.value; // Get selected class
    updateChartData(selectedClass); // Call function to update chart
});