我正在使用带有工具提示的Chart.js饼图,但由于某种原因被截断。
附加了截图,没有找到任何属性/选项来解决它..
有没有什么办法可以解决它?
谢谢!
我正在使用带有工具提示的Chart.js饼图,但由于某种原因被截断。
附加了截图,没有找到任何属性/选项来解决它..
有没有什么办法可以解决它?
谢谢!
这个不当的截断问题被提出为ChartJS在Github仓库中的issue#622。
已经确定这是一个错误(显然这个错误尚未被修复)
https://github.com/nnnick/Chart.js/issues/622
作为对该问题的回应,Robert Turrall提供了一个他认为很好的解决方法。这是他提议的修复方法:
我相信这是因为工具提示是在画布的范围内生成的,这使得修复变得困难。
我的圆环图表上也有同样的问题,通过实现自定义工具提示来解决,就像示例文件夹中的示例一样,在图表初始化代码中与我的现有工具提示字体大小和模板设置一起使用- :
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
请查看samples/pie-customTooltips.html获取自定义工具提示代码。 复制/粘贴,它立即就可以运行。非常开心!
工具提示显示在画布范围之外:
顺便提一下:还有一个折线图的例子,我猜应该也适用于条形图。
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
看起来 Chart.js 无法确定提示框的方向,因为当它扩展到画布之外时,它无法检测到提示框元素的大小。
在我的情况下,我通过使用提示框选项对象中的以下选项将此特定提示框中的文本压缩得更紧密来解决了这个问题:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
奇怪的是,Chart.js 正确地决定将工具提示显示在鼠标左侧而不是下方。 如果能选择工具提示相对于鼠标出现的方向会很酷。
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
似乎有一个可用的修复方案,但尚未合并到项目中:https://github.com/chartjs/Chart.js/pull/1064
tooltipCaretSize
选项设置为0
可以解决这个问题。{ tooltipCaretSize: 0, ... }