如何在 chart.js 3.x 中更改字体大小、仅图表标题的填充

我正在尝试减少填充并增加标题文本字体大小,我虽然做了几个例子,但似乎没有用。即使将参数放置在多个位置。

const labels1_1 = ['1','2','3', '4', '5','6','7', '8','9+'];
const data1_1 = {
  labels: labels1_1,
  datasets: [{
    label: 'Trucks',
    data: [1,2,3, 4, 5,6,7, 8,9],
    backgroundColor: '#4472C4',
    borderColor: '#4472C4',
    borderWidth: 1
  }]
};  
const config1_1 = {
    type: 'bar',
    data: data1_1,
    options: {
      title:{
        padding:5,
        fontSize:18
      },

        plugins: {
            title: {
                display: true,
                text: 'Number of SS vs Number of Trucks',
                padding:5,
                fontSize:18

            },
            datalabels: {
              align: 'end',
              anchor: 'end',
              backgroundColor: '#3472C4' 
              },

        },

      scales: {

        y: {
            display:true,
          beginAtZero: true,
          title: {
              display: true,
              text: 'SS'
          }

        },

      }
    },
  };

const myChart1_1 = new Chart(
    document.getElementById('myChart1_1'), config1_1);

我经历了 https://www.chartjs.org/docs/2.8.0/configuration/title.html 但没有帮助。还有如何在全球范围内提及它,以便所有标题都有更大的字体。文本:“SS 数量与卡车数量”是标题。

stack overflow How to change font size, padding of chart title only, in chart.js 3.x
原文答案

答案:

作者头像

它没有帮助的原因是因为您正在查看版本 2.8.0 的文档,正如您在 url 中看到的那样,最新版本是 3.6.2 并且对 v2 有一些重大更改。

要调整字体属性,您需要在标题配置的字体对象中定义它们,如下所示:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Number of SS vs Number of Trucks',
        font: {
          size: 30
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

最新的 V3 文档: https://www.chartjs.org/docs/latest/

作者头像

标题选项在 Chartjs v2 中发生了相当大的变化。我发现标题完全隐藏了,直到我添加了填充 - 例如

options: {
      plugins: { 
        title: {
          display: true, 
          text: "Title" ,
          padding: {
              top: 10,
              bottom: 10
          },
          font: {
            size: 24,
            style: 'italic',
            family: 'Helvetica Neue'
          }
        }
      },
      ... other options here
}