javascript - Chart.js 雷达图表图例标签字体大小不起作用

Question

我正在使用 Chart.js。

我想让我的图表图例标签字体大小更大。

所以我尝试这样:

var ctx = $('#skill_chart');

new Chart(ctx,{
    "type":"radar",
    "data": {
            "labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
            "datasets":[{
                    "label":"My Second Dataset",
                    "data":[28,48,40,19,96,27,100],
                    "fill":true,
                    "backgroundColor":"rgba(54, 162, 235, 0.2)",
                    "borderColor":"rgb(54, 162, 235)",
                    "pointBackgroundColor":"rgb(54, 162, 235)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(54, 162, 235)"}]
                },
    "options":{
        "elements":{
        "line":{
            "tension":0,
            "borderWidth":3}
            }
        },

        "legend": {
            "display": true,
            "labels": {
                "fontSize": 20,
            }
        },
    });

但它不起作用。
我应该怎么办？

Answer 1

您的 legend对象在 options 之外目的。它需要在 options 内目的。以下代码将起作用:

var ctx = $('#skill_chart');

new Chart(ctx,{
    "type":"radar",
    "data": {
            "labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
            "datasets":[{
                    "label":"My Second Dataset",
                    "data":[28,48,40,19,96,27,100],
                    "fill":true,
                    "backgroundColor":"rgba(54, 162, 235, 0.2)",
                    "borderColor":"rgb(54, 162, 235)",
                    "pointBackgroundColor":"rgb(54, 162, 235)",
                    "pointBorderColor":"#fff",
                    "pointHoverBackgroundColor":"#fff",
                    "pointHoverBorderColor":"rgb(54, 162, 235)"}]
                },
    "options":{
        "elements":{
            "line":{
                "tension":0,
                "borderWidth":3
            }
        },

        "legend": {
            "display": true,
            "labels": {
                "fontSize": 20,
            }
        },
    }
});

这是字体文档的链接: https://www.chartjs.org/docs/latest/general/fonts.html