Javascript 如何在标题图表中添加页边距底部

我想知道如何在ChartJS中为我的标题添加底部边距，以防止Datalabels与标题重叠，谢谢

您可以在该链接中查看图表

我使用：

• ChartJS
• ChartJS数据标签

这是我的密码

//chart por rango de edad
var ctx_age_range = document.getElementById('chart_age_range');
var myDoughnutChart = new Chart(ctx_age_range, {
    type: 'bar',
    data: {
        labels: ["<20", "20-29", "30-39", "40-55", ">56"],
        datasets: [{
          label: "Cantidad",
          backgroundColor: ["#47b3d5", "#47b3d5","#47b3d5","#47b3d5","#47b3d5"],
          data: [0.32,34.55,34.79,25.32,5.02]
        }]
    },
    options: {
        legend: {
            display: false,
         },
        title: {
            display: true,
            text: 'CASOS POR RANGO DE EDAD',
            fontSize:15,
            color:"black"
        },
        scales: {
            xAxes: [{
                gridLines: {display: false},
                ticks: {
                    stepSize: 1,
                    min: 0,
                    fontSize:12
                },
                barPercentage: 0.8,
                categoryPercentage: 1,
            }],
            yAxes: [{
                scaleLabel: {
                    display: false,
                },
                gridLines: {display: false,drawBorder:false},
                ticks:{
                    display:false,
                },
            }]
        },
        plugins: {
            datalabels: {
                display: true,
                align: 'end',
                anchor: 'end',
                formatter: function(value, ctx) {
                    return value+'%';
                },
                color:'black',
                font:{
                    size: 11
                }
            }
        }
                        
    }
});

//图中所示为rango de edad
var ctx_age_range=document.getElementById（'chart_age_range'）；
var myDoughnutChart=新图表（ctx年龄范围{
类型：'bar'，
数据：{
标签：[“56”]，
数据集：[{
标签：“Cantidad”，
背景颜色：[“#47b3d5”、“#47b3d5”、“#47b3d5”、“#47b3d5”、“#47b3d5”]，
数据：[0.32,34.55,34.79,25.32,5.02]
}]
},
选项：{
图例：{
显示：假，
},
标题：{
显示：对，
文字：'CASOS POR RANGO DE EDAD'，
尺寸：15，
颜色：“黑色”
},
比例：{
xAxes：[{
网格线：{display:false}，
滴答声：{
步长：1，
分:0,，
字体大小：12
},
百分之0.8，
类别类别：1，
}],
雅克斯：[{
scaleLabel：{
显示：假，
},
网格线：{display:false，drawBorder:false}，
滴答声：{
显示：假，
},
}]
},
插件：{
数据标签：{
显示：对，
对齐：“结束”，
主持人:"结束",，
格式化程序：函数（值，ctx）{
返回值+'%'；
},
颜色：'黑色'，
字体：{
尺码：11
}
}
}
}
});

---

我想知道如何将页边距底部添加到标题或如何在图形顶部添加页边距/填充。

您可以使用

标题

选项上的

填充

属性来实现：

var ctx_age_range=document.getElementById（'chart_age_range'）；
var myDoughnutChart=新图表（ctx年龄范围{
类型：'bar'，
数据：{
标签：[“56”]，
数据集：[{
标签：“Cantidad”，
背景颜色：[“#47b3d5”、“#47b3d5”、“#47b3d5”、“#47b3d5”、“#47b3d5”]，
数据：[0.32,34.55,34.79,25.32,5.02]
}]
},
选项：{
图例：{
显示：假，
},
标题：{
显示：对，
文字：'CASOS POR RANGO DE EDAD'，
尺寸：15，
颜色：“黑色”，
填充：30
},
比例：{
xAxes：[{
网格线：{display:false}，
滴答声：{
步长：1，
分:0,，
字体大小：12
},
百分之0.8，
类别类别：1，
}],
雅克斯：[{
scaleLabel：{
显示：假，
},
网格线：{display:false，drawBorder:false}，
滴答声：{
显示：假，
},
}]
},
插件：{
数据标签：{
显示：对，
对齐：“结束”，
主持人:"结束",，
格式化程序：函数（值，ctx）{
返回值+'%'；
},
颜色：'黑色'，
字体：{
尺码：11
}
}
}
}
});

请将您的代码包含在可复制的问题中，好吗？是的，我有。我在描述中添加代码。谢谢。谢谢你的回答，但问题在于插件ChartJS Datalabels，数字与标题重叠，因此我想在图表中添加页边空白。@JoelFernandez刚刚更新了我的代码和答案，很抱歉我之前没有包含datalables库。太棒了！很高兴能帮上忙，别忘了把它标记为答案！