Javascript Chart.js添加自定义标题、副标题和图形

我正在为一个项目（）使用Chart.js

有人知道如何在实际的画布上绘制新内容，如标题或添加自定义图像，在图表中添加“边距”吗？

是的

您可以设置ChartJs的

onAnimationComplete

回调，以便在ChartJs完成自己的绘图和动画制作后调用自定义绘图代码

在该回调中，您可以获得

画布上下文

（==最初输入ChartJS的相同画布/上下文），并使用该上下文绘制您想要的任何新自定义内容

下面是一个如何工作的示例：

ChartJS的图表内容没有本机的“填充”。获得一些填充的一种方法是将图表绘制到较小的内存画布上，然后使用偏移量将内存画布绘制到可见画布上，以允许进行所需的填充

下面是一个例子：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
变量数据=[
{
价值：200，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“红色”
},
{
价值：50，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“绿色”
},
{
数值：100，
颜色：“FDB45C”，
亮点：“FFC870”，
标签：“黄色”
},
{
价值：40，
颜色：“949FB1”，
亮点：“A8B3C5”，
标签：“灰色”
},
{
数值：120，
颜色：“4D5360”，
亮点：“616774”，
标签：“深灰色”
}
];
//创建内存画布（c）
var c=document.createElement（“画布”）；
//将其调整为所需大小（无填充）
c、 宽度=100；
c、 高度=100；
//把它藏起来
c、 style.visibility='hidden'；
文件.正文.附件（c）；
//在内存画布上创建图表
var cctx=c.getContext（“2d”）；
window.myPie=新图表（cctx）.Pie（pieData{
回答：错，
动画：错，
//当图表完全绘制出来时，
//将内存中的图表绘制到可见图表
//考虑到你想要的填充
//（本例为100宽50高。）
onAnimationComplete:function（）{
ctx.drawImage（c，100,50）；
ctx.fillText（'此处添加内容的空格，填充50x100'，5,20）；
ctx.fillText（“添加了填充”，5,90）；
ctx.beginPath（）；
ctx.moveTo（0100）；
ctx.lineTo（100100）；
ctx.stroke（）；
}
})；

body{背景色：象牙；}
画布{边框：1px纯红；}

Ah！您的意思是填充而不是边距。ChartJS的图表内容中没有本机填充，但我添加了一个解决方法来解决这个问题。祝您的项目好运！