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

bnl4lu3b  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(247)

我正在尝试减少填充和增加标题文本的字体大小,我去了几个例子,但似乎不工作。甚至在放置参数在多个地方。

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数量与卡车数量”是标题。

ua4mk5z4

ua4mk5z41#

它没有帮助的原因是因为您正在查看版本2.8.0的文档,正如您在url中看到的,最新版本是3.6.2,它对v2有一些突破性的更改。
要调整字体属性,您需要在标题配置中的字体对象中定义它们,如下所示:
第一个
最新的V3文档:https://www.chartjs.org/docs/latest/

bvjxkvbb

bvjxkvbb2#

在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
}

相关问题