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

Answer 2

您必须在配置时在fontSize对象的pointLables对象内的scale中设置。以下选项可用于自定义数据中标签的字体大小（根据您对@Rounak的要求）

radarOptions: {
    scale: {
        pointLabels: {
            fontSize: 13
        }
    }
}

所有功劳归给：https://github.com/chartjs/Chart.js/issues/2854#issuecomment-331057910

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

2 个答案: