ChartJS v3.X -限制画布上标签的字符串大小，而不更改工具提示悬停字符串
所以，我有一些旧的图表代码使用了一个非常旧的Chart.js版本2.x，但是现在由于只在3.x版本上找到一些函数的需要，我从网站上的旧图表中更新了很多代码，因为很多语法在不同版本之间都发生了变化。
我刚刚完成了所有图表的更新，他们正在很好地使用插件等，除了一个。
在这个type: 'bar'图表上，我在“X”轴上有一些非常长的字符串，所以我需要将它们修剪到12个字符的最大值，但是工具提示需要显示整个字符串。以前的代码是这段代码，工作起来很有魅力，就在呈现图表之前，我会设置updateScaleDefaults：
// Limit the size of label for 12 characters, tooltip on hover not changed
Chart.scaleService.updateScaleDefaults('category', {
ticks: {
callback: function(tick) {
var characterLimit = 12;
if ( tick.length >= characterLimit) {
return tick.slice(0, tick.length).substring(0, characterLimit -1).trim() + '...';;
}
return tick;
}
}
});因此，在此之后，我将调用new Chart实例并在画布上呈现它。但是现在这段代码在v3.x上不再工作了，而且我无法制作替代版本。
作为V3.x文档的迁移指南，
Chart.scaleService代之以Chart.registry。规模默认值现在在Chart.defaults.scalestype中
因此，我尝试将上面代码的第一行更改为这个和许多其他变体，尝试重用旧代码，只更改对对象的调用：
Chart.defaults.scales['category']我什么都没试过。
然后，我尝试用beforeDraw创建一个插件，访问chart.scales.x.ticks，并尝试在map调用上创建箭头函数，但我得到了如下所示的$context is a object error：
const pluginLimitTitle = {
beforeDraw: (chart) => {
console.log(chart.scales.x.ticks);
chart.scales.x.ticks = chart.scales.x.ticks.map(function (tick) {
var characterLimit = 12;
if (tick['label'].length >= characterLimit) {
return tick['label'].slice(0, tick['label'].length).substring(0, characterLimit - 1).trim() + '...';
;
}
return tick;
});
}我还试着在options: scales: x: ticks上创建图表的选项中加入滴答回调，但这两种方法都行不通。
有人能帮我在v3.x上做这个吗？花了一整天的时间去尝试很多事情，但不要去看，我正离它越来越近，以使它发挥作用。
回答 1
Stack Overflow用户
发布于 2022-06-18 23:26:00
在浪费了很多时间之后，我在文档上找到了一个应该在示例中突出显示的“提示”，而不仅仅是在“标签轴”页面上突出显示。
当您对图表选项设置中的滴答进行回调时，您可以调用3个params：
function(value, index, ticks)
我尝试了很多方法来更改最后一个，因为它是所有带有标签的滴答的数组，而且它是唯一出现标签字符串的数组，所以我试图修改它。
首先，您可能认为要更改的是" value“参数，但它在每次回调迭代中返回与"index”参数完全相同的整数值，所以我认为唯一可以操作的更改字符串的参数是"ticks“数组，但我完全错了。
实际上，您需要调用一个名为getLabelForValue()的特殊函数。
工作代码的结果如下：
const configTotal = {
type: 'bar',
data: dataTotal,
options: {
scales: {
y: {
beginAtZero: true
},
x: {
ticks: {
callback: function(value, index, ticks_array) {
let characterLimit = 12;
let label = this.getLabelForValue(value);
if ( label.length >= characterLimit) {
return label.slice(0, label.length).substring(0, characterLimit -1).trim() + '...';
}
return label;
}
}
}
}
},
};我希望这能帮助那些和我有同样问题的人。
也许我浪费的所有时间都是因为我没有耐心地阅读每一行，但在我看来，这个文档缺少更多用于访问属性和回调参数的示例代码，以及它的对象值，它只是显示对象的类型和每个类方法调用的返回，这使chart.js用户中没有经验的人非常困惑。
https://stackoverflow.com/questions/72672841
复制相似问题
腾讯云开发者
