图表 JS - 如果没有可用数据,则在清除 canvas 时缺少标题
Chart JS - Title missing when clearing canvas if no data is available
编辑 - 下面的答案工作正常,除了删除 chart.clear()
之外我所做的就是隐藏图例和 x/y 轴。
现在有什么可能导致文本模糊的想法吗?
我确定我正在做一些非常愚蠢的事情,但我似乎无法弄清楚这一点。
我有以下全局插件,它会在适用时显示“没有要显示的数据”消息:
Chart.plugins.register({
afterDraw: function(chart, args, options) {
if (chart.data.datasets.every(dataSetContainsNoData)) {
debugger;
var ctx = chart.chart.ctx;
var width = chart.chart.width;
var height = chart.chart.height;
chart.clear();
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('No data to display', width / 2, height / 2);
}
}
});
但是,我想将此图表的标题显示在顶部,但不知道该怎么做。如果我检查 chart.chart.options
标题选项设置了文本,并且显示标志设置为 true
。
以下是实际图表上的选项。
options: {
title: { display: true, text: 'Chart Header Text' },
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
非常感谢任何帮助!
您需要注释掉 chart.clear()
并且标题应该有效。
编辑 - 下面的答案工作正常,除了删除 chart.clear()
之外我所做的就是隐藏图例和 x/y 轴。
现在有什么可能导致文本模糊的想法吗?
我确定我正在做一些非常愚蠢的事情,但我似乎无法弄清楚这一点。
我有以下全局插件,它会在适用时显示“没有要显示的数据”消息:
Chart.plugins.register({
afterDraw: function(chart, args, options) {
if (chart.data.datasets.every(dataSetContainsNoData)) {
debugger;
var ctx = chart.chart.ctx;
var width = chart.chart.width;
var height = chart.chart.height;
chart.clear();
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('No data to display', width / 2, height / 2);
}
}
});
但是,我想将此图表的标题显示在顶部,但不知道该怎么做。如果我检查 chart.chart.options
标题选项设置了文本,并且显示标志设置为 true
。
以下是实际图表上的选项。
options: {
title: { display: true, text: 'Chart Header Text' },
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
非常感谢任何帮助!
您需要注释掉 chart.clear()
并且标题应该有效。