如何在 chart.js 中更改 React 折线图工具提示标题字体系列

Question

我在反应网络应用程序中使用“chart.js”：“^3.7.1”和react-chartjs-2。我想更改图表工具提示字体系列。这是我在图表中使用的选项。我无法将字体系列应用于折线图。我想为工具提示中的标题应用自定义字体。我使用了chart js文档中提到的道具

const options = {
    animation,
    plugins: {
      tooltip: {
        backgroundColor: "#fff",
        displayColors: false,
        borderColor: "#8b7a7a",
        borderWidth: 0.5,
        bodyColor: "#0000",
        titleColor: "#8b7a7a",
        // bodyFontColor: "#8b7a7a",
        padding: 10,
        footerSpacing: 0,
        boxHeight: 10,
        title: {
          font: {
            size: 50,
            family: "'Work Sans',sans-serif",
          },
        },
        callbacks: {
          title: function (t, d) {
            let datae = moment(t[0].label).format("MMM DD, YYYY");
            const aa = t[0].dataset.label;
            const val = t[0].formattedValue;
            return `Date: ${datae.toString()}\n${aa}: ${val}`;
          },
        },
      },
      legend: {
        display: false,
      },
    },

    elements: {
      line: {
        tension: 0,
      },
    },
    legend: {
      display: false,
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
  };

Answer 1

可以看到 here 您需要在 titleFont 属性而不是 title.font 属性中配置工具提示标题的字体:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        titleFont: {
          family: 'commic-sans-ms'
        }
      }
    }
  }
}

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

如何在 chart.js 中更改 React 折线图工具提示标题字体系列

How to change React line chart tooltip title font family in chart.js

javascript

reactjs

chart.js

react-chartjs-2