图表.js. 如何按工具提示的中心对齐文本?

Дим*_*аев 8 javascript canvas chart.js chartjs-2.6.0

bodyAlign 和 titleAlign 不起作用,也许有人知道如何通过工具提示中心对齐文本?

在此输入图像描述

https://jsfiddle.net/Dima1501/m7s43hrs/2900/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
      ],
      borderColor: [
      ],
      borderWidth: 1
    }]
  },
 options: {
    tooltips: {
    yAlign: 'bottom',
            xAlign: 'center',
    xPadding: 25,
            yPadding: 15,
      xPadding: 45,
      titleAlign: 'center',
            footerAlign: 'center',
            bodyAlign: 'center',
  callbacks: {
  },
  backgroundColor: '#ccc',
  titleFontSize: 16,
  titleFontColor: '#0066ff',
  bodyFontColor: '#000',
  bodyFontSize: 14,
  displayColors: false
   }
  }
});
Run Code Online (Sandbox Code Playgroud)

zhu*_*per 6

您使用的是 2.5.0,它有 bug。更新到最新的2.8.0,已经可以正常工作了。https://jsfiddle.net/zhuhang95/utc9wenx/4/

通常,使用titleAlignandbodyAlign应该可以解决问题。

Chart.js 文档:https://www.chartjs.org/docs/latest/configuration/tooltip.html#alignment

        options: {
            tooltips: {
                titleAlign: 'center',
                bodyAlign: 'center'
            }
        }
Run Code Online (Sandbox Code Playgroud)


G.R*_*ose 0

align properties把事情搞砸了。尝试一下:

https://jsfiddle.net/m7s43hrs/2951/