如何在chart.js绘图的图例中增加字体大小?

z5btuh9x  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(241)

我正在尝试增加标签的字体大小在图例的一个图,我已经做了chart.js。附件有一个截图:

我想增加“标签1,2,3”的字体大小。
下面是我现在使用的javascript配置:

var data = {
    labels: x_axis_labels,
    datasets: [
        {
            label: 'Label 1',
            data: data_1,
            borderColor: 'rgb(46,138,207)',
            backgroundColor: 'rgb(46,138,207)',
            yAxisID: 'y',
        },
        {
            label: 'Label 2',
            data: data_2,
            borderColor: 'rgb(214,224,52)',
            backgroundColor: 'rgb(214,224,52)',
            yAxisID: 'y1',
        },
        {
            data: data_3,
            label:'Label 3',
            borderColor: 'rgb(244,67,54)',
            backgroundColor: 'rgb(244,67,54)',
            yAxisID: 'y1',
            pointStyle:'dash',
            borderDash: [20, 30],
            pointBackgroundColor: "transparent",
        },
    ]
};

const config = {
    type: 'line',
    data: data,
    options: {

        responsive: true,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        stacked: false,
        plugins: {

            title: {
                display: true,

            }
        },
        scales: {

            x:{
                title:{
                    display: true,
                    text: 'X axis name',
                    font: {size:30},
                },
                ticks: {
                    font: {
                        size: 20,
                    }
                }
            },
            y: {
                title:{
                    display: true,
                    text: 'First y axis name',
                    font: {size:30}
                },
                type: 'linear',
                display: true,
                position: 'left',
                ticks: {
                    font: {
                        size: 24,
                    }
                }
            },
            y1: {
                title:{

                    display: true,
                    text: 'Second Y axis name',
                    font: {size:30}
                },
                type: 'linear',
                display: true,
                position: 'right',
                ticks:{
                    font:{
                        size:24,
                    }
                },
                // grid line settings
                grid: {
                    drawOnChartArea: false, 
                },
            },
        },
    },
};

我试过Font DocumnetationLegend Documentation,但是什么都没有。有人有过这方面的经验吗?提前感谢

lfapxunr

lfapxunr1#

如文档中所述,您可以在options.plugins.legend.labels.font.size命名空间中设置大小

options: {
  plugins: {
    legend: {
      labels: {
        font: {
          size: 20
        }
      }
    }
  }
}

相关问题