需要帮助将日期拆分为圆环图 js 中的新行

Posted 2023-02-22

【中文标题】需要帮助将日期拆分为圆环图 js 中的新行

【英文标题】：Need help splitting date to new line in Doughnut Chart js

【发布时间】：2022-01-24 04:08:26

【问题描述】：

我正在使用@Cmyker 代码的排列（请参阅here）在圆环图的中心放置文本，但我无法获取我所做的日期设置以中断而不是粘贴到与文本其余部分相同的行。我尝试在文本末尾添加 /n 我希望它打破但似乎不起作用，对此有何建议？

//Date for chart
let today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();

//Chart
window.onload = function()
  //dataset
  var data = 
    labels: [" Akaun 1"," Akaun 2"],
    datasets: [
      data: [1300.00, 895.75],
      backgroundColor: ["#430092","#36A2EB"],
      hoverBackgroundColor: ["#430092","#36A2EB"],
      cutout: ["70%"],
    ]
  ;

  //init & config
  var chart = new Chart(document.getElementById('myChart'), 
    type: 'doughnut',
    data: data,
    options: 
      responsive: true,
      legend:  display: false,
      labels:  font: size: 12
    
  );

  const centerDoughnutPlugin = 
      id: "annotateDoughnutCenter",
      beforeDraw: (chart) => 
        let width = chart.chartArea.left + chart.chartArea.right;
        let height = chart.chartArea.top + chart.chartArea.bottom;
        let ctx = chart.ctx;

        ctx.restore();
        //Font setting
        let fontSize = (height / 250).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";

        let text = "Balance as of: \n" + date;

        //Center text
        let textX = width / 2;
        let textY = height / 2;

        console.log("text x: ", textX);
        console.log("text y: ", textY);

        ctx.fillText(text, textX, textY);
        ctx.save();
      ,
    ;

  Chart.register(centerDoughnutPlugin);

<canvas id="myChart">
</canvas>

【参考方案1】：

CanvasRenderingContext2D.fillText() 在一行中绘制文本。如果您需要将其分成多行，则需要拆分文本并多次调用filltext()。

您也可以使用Canvas-Txt 库。

请看这个答案https://***.com/a/54390661/2358409

【讨论】：

非常感谢您的帮助，现在可以使用了：D