ChartJS 雷達改變 Label 顏色

Question

我想使用 Chart.js 設計雷達圖的樣式，但我似乎無法弄清楚。 我想首先將每個文本的顏色更改為白色，包括標題、label 名稱和標簽。 我還想刪除軸號周圍的框，並將它們的 colors 也更改為白色。 這是我有 atm 的代碼（我使用 django 作為數據）

new Chart(ctx, {
    type: 'radar',
    data: {
        labels: {{ subjects|safe }},
        datasets: [{
            label: '2022 Noten',
            data: {{ grades_avg }},
            borderWidth: 1
        }, {
            label: '2021 Noten',
            data: [],
            borderWidth: 0.5
        }]
    },
    options: {
        scale: {
            min: 1,
            max: 6,
            ticks: {
                stepSize: 0.5,
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            r: {
                grid: {
                    color: 'gray'
                },
                angleLines: {
                    color: 'gray'
                },
            }
        },
        plugins: {
            title: {
                display: true,
                text: 'Noten im Vergleich'
            }
        }
    }
});

我只是無法全神貫注於這個圖書館，非常感謝你的幫助。 謝謝！

Answer 1

 <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); Chart.defaults.color = '#fff'; new Chart(ctx, { type: 'radar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 10, borderColor: '#00A2EB', backgroundColor: '#FFB1C1', }] }, options: { scales: { y: { beginAtZero: true } } } }); </script>

你在這里有最簡單的例子 - 詳細的文檔在這里https://www.chartjs.org/docs/latest/general/colors.html

Answer 2

好的。 下面我給你一個例子，其中包含指向文檔的有用鏈接。

 const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'radar', data: { labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'], datasets: [{ label: 'Data', data: [3.5, 5, 2.5, 3], borderWidth: 1 }] }, options: { locale: 'en-US', scale: { min: 1, max: 6, ticks: { stepSize: 0.5, } }, scales: { r: { // https://www.chartjs.org/docs/latest/axes/radial/ angleLines: { color: 'gray' }, grid: { color: 'gray' }, pointLabels: { // https://www.chartjs.org/docs/latest/axes/radial/#point-labels color: 'white' }, ticks: { // https://www.chartjs.org/docs/latest/axes/radial/#ticks color: 'white', backdropColor: 'transparent' // https://www.chartjs.org/docs/latest/axes/_common_ticks.html } } }, plugins: { title: { // https://www.chartjs.org/docs/latest/configuration/title.html display: true, text: 'Title', color: 'white' }, legend: { labels: { // https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration color: 'white' } } } } });

 .chart-container { position: relative; height: 90vh; } canvas { background: #282a2d; }

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div class="chart-container"> <canvas id="myChart"></canvas> </div>