如何在 Chart JS 的工具提示中更改页脚的字体粗细

Question

我正在尝试更改 Chart JS 工具提示中页脚的字体粗细。根据这个 link (https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration)，footerFont 似乎是控制它的人，但我无法完全让它工作

我的代码：

options: {
        tooltips:{
            footerFont: {weight: 'normal'},
          callbacks: {
            footer: function(tooltipItem, data) {
              return 'some text'
            }
          }
        },    
    }

Fiddle：https://jsfiddle.net/dqdqdq/yp47oL9t/10/。当我们悬停任何气泡时，页脚仍然是粗体。

Answer 1

您正在查看 chart.js 版本 3 的文档，它与版本 2 相比有一些重大变化，如果您阅读版本 2 文档：https://www.chartjs.org/docs/2.7.1/configuration/tooltip.html 您可以看到属性被称为有点不同，也只接受一个字符串

工作样本：

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

  type: 'bubble',

  data: {
    datasets: [{
        label: 'Top',
        data: [{
          x: 110,
          y: 0,
          r: 10,
          name: "Performance"
        }],
        backgroundColor: "rgba(153,255,51,0.6)"
      },
      {
        label: 'Average',
        data: [{
          x: 75,
          y: 0,
          r: 10,
          name: "Performance"
        }],
        backgroundColor: "rgba(153,155,51,0.6)"
      },
    ]
  },
  pointDot: true,
  options: {
    tooltips: {
      footerFontStyle: 'normal',
      callbacks: {
        footer: function(tooltipItem, data) {
          return 'some text'
        }
      }
    },
  }

});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

如何在 Chart JS 的工具提示中更改页脚的字体粗细

How to change font weight of footer in tooltips in Chart JS

javascript

chart.js

react-chartjs