时间戳

首页 > 解决方案 > 在图表中 js 工具提示字体大小不起作用

charts - 在图表中 js 工具提示字体大小不起作用

问题描述

我想在图表 js 中制作大字体的工具提示，但不幸的是它对我不起作用，我在这里添加了我的代码，任何人都可以检查我的代码，并帮助我解决这个问题吗？

options: {
  plugins: {
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        font: {
          size: 30
        }
      }
    },
    tooltips: {
      font: {
        size: 30
      }
    }
  },

}

标签： chartschart.js

解决方案

您可以为工具提示的标题、正文和页脚定义不同的字体，因此您需要在这些特定位置定义它：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        titleFont: {
          size: 100
        },
        bodyFont: {
          size: 50
        },
        footerFont: {
          size: 20 // there is no footer by default
        }
      }
    }
  }
}

var 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.5.1/chart.js"></script>
</body>

推荐阅读