ChartJS - 雷达图表选项不起作用答案

【问题标题】：ChartJS - radar chart options not workingChartJS - 雷达图表选项不起作用
【发布时间】：2021-07-06 17:16:06
【问题描述】：

我在这里使用最新版本的 chart.js https://cdnjs.com/libraries/Chart.js（CDN 网站的第一个链接）。我想更改 pointLabels 的字体大小，但失败了。我也未能设置 display: false 的刻度。他们唯一起作用的是刻度的字体大小。谁能帮帮我？

    const data = {
        labels: [
            'Eating',
            'Drinking',
            'Sleeping',
            'Designing',
            'Coding',
            'Cycling',
            'Running'
        ],
        datasets: [{
            data: [4, 1, 1, 4, 2, 3, 5],
            fill: false,
            borderColor: 'rgb(255, 99, 132)',
            pointRadius: 1,
        }]
    };

    const config = {
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {borderWidth: 1}
            },
            scale: {
                ticks: {
                    beginAtZero: true,
                    max: 5,
                    min: 0,
                    stepSize: 1,
                    font: {
                        size: 6
                    }
                },
                pointLabels:{
                    fontSize: 20
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        },
    };

    var myChart = new Chart(
        document.getElementById('chart'),
        config
    );

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

最新版本是刚刚发布的V3，如迁移指南scale option was removed in favor of options.scales.r (or any other scale id, with axis: 'r')中所述，已删除缩放选项，您将不得不使用scales: {r: {config for scale}}

https://www.chartjs.org/docs/master/getting-started/v3-migration.html

所以你会得到：

const data = {
    labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
    ],
    datasets: [{
        data: [4, 1, 1, 4, 2, 3, 5],
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        pointRadius: 1,
    }]
};

const config = {
    type: 'radar',
    data: data,
    options: {
        elements: {
            line: {
                borderWidth: 1
            }
        },
        scales: {
            r: {
                ticks: {
                    beginAtZero: true,
                    max: 5,
                    min: 0,
                    stepSize: 1,
                    font: {
                        size: 6
                    }
                },
                pointLabels: {
                    fontSize: 20
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    },
};

var myChart = new Chart(
    document.getElementById('chart'),
    config
);

【讨论】：

【解决方案2】：

您可以从“刻度”更改为“刻度”并添加“R”轴：

const data = {
        labels: [
            'Eating',
            'Drinking',
            'Sleeping',
            'Designing',
            'Coding',
            'Cycling',
            'Running'
        ],
        datasets: [{
            data: [4, 1, 1, 4, 2, 3, 5],
            fill: false,
            borderColor: 'rgb(255, 99, 132)',
            pointRadius: 1,
        }]
    };

    const config = {
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {borderWidth: 1}
            },
            scales: {
                ticks: {
                    display:false,
                    beginAtZero: true,
                    max: 5,
                    min: 0,
                    stepSize: 1,
                    font: {
                        size: 6
                    }
                },
                r: {
                    pointLabels:{
                        font: {
                            size: 30,
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        },
    };

    var myChart = new Chart(
        document.getElementById('chart'),
        config
    );

【讨论】：

【解决方案3】：

截至 2021 年 6 月 2 日：

关于这个有一个ongoing issue。您现在最好的选择是将软件包降级为以下内容：

chart.js@2.9.4

如果你也在使用 React.js：

react-chartjs-2@2.11.1

【讨论】：