ChartJS v3.X -限制画布上标签的字符串大小,而不更改工具提示悬停字符串

ztigrdn8  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(231)

因此,我有一些旧的图表代码使用一个非常旧的Chart.js版本2.x,但现在由于一些功能的需要,只有在版本3.x上找到我更新了很多代码从旧的图表在网站上,因为很多语法之间的版本变化。
我刚刚完成更新所有的图表,他们正在很好地使用插件等工作,除了一个。
在这个type: 'bar'图表中,我在'X'轴上有一些很长的字符串,所以我需要将它们修剪到最多12个字符,但是工具提示需要显示整个字符串。旧代码曾经是这样的,工作起来很有魅力,在渲染图表之前,我会设置updateScaleDefaults:

  1. // Limit the size of label for 12 characters, tooltip on hover not changed
  2. Chart.scaleService.updateScaleDefaults('category', {
  3. ticks: {
  4. callback: function(tick) {
  5. var characterLimit = 12;
  6. if ( tick.length >= characterLimit) {
  7. return tick.slice(0, tick.length).substring(0, characterLimit -1).trim() + '...';;
  8. }
  9. return tick;
  10. }
  11. }
  12. });

然后我会调用new Chart示例,并在画布上渲染它,但是现在这段代码在v3.x上已经不起作用了,我也不能再做一个替代的版本了。
正如V3.x迁移指南在文档中所述,

  • Chart.scaleService* 已替换为 Chart.registry。刻度默认值现在位于 Chart.defaults.scales[类型]

因此,我尝试将上面代码的第一行更改为以下代码和其他许多变体,尝试重用旧代码,只是更改对对象的调用:

  1. Chart.defaults.scales['category']

我试过的都没用。
然后我尝试用beforeDraw创建一个插件,访问chart.scales.x.ticks,并尝试在map调用上创建一个箭头函数,但我得到了一个$context is a object error,如下所示:

  1. const pluginLimitTitle = {
  2. beforeDraw: (chart) => {
  3. console.log(chart.scales.x.ticks);
  4. chart.scales.x.ticks = chart.scales.x.ticks.map(function (tick) {
  5. var characterLimit = 12;
  6. if (tick['label'].length >= characterLimit) {
  7. return tick['label'].slice(0, tick['label'].length).substring(0, characterLimit - 1).trim() + '...';
  8. ;
  9. }
  10. return tick;
  11. });
  12. }

我还尝试在options: scales: x: ticks上的图表创建选项中放置ticks回调,但无论哪种方式都不起作用。
有人能帮我在v3.x上做这个吗?花了一整天的时间尝试了很多东西,不要看我越来越接近使它工作。

uwopmtnx

uwopmtnx1#

在浪费了很多小时之后,我在文档上发现了一个“提示”突出显示,应该在示例中,而不仅仅是在“标记轴”页面上严重突出显示。
当您在图表选项设置上回调分笔成交点时,您将获得3个要调用的参数:
getLabelForValue()
我尝试了很多方法来修改最后一个,因为它是所有刻度及其标签的数组,并且它是唯一一个出现标签字符串的数组,所以我试图修改它。
起初您可能会认为“value”参数是要更改的参数,但它在每次回调迭代中返回的整数值与“index”参数完全相同,因此我认为唯一可以操作来更改字符串的是“ticks”数组,但我完全错了。
实际上,您需要调用一个名为getLabelForValue()的特殊函数。
工作代码如下所示:

  1. const configTotal = {
  2. type: 'bar',
  3. data: dataTotal,
  4. options: {
  5. scales: {
  6. y: {
  7. beginAtZero: true
  8. },
  9. x: {
  10. ticks: {
  11. callback: function(value, index, ticks_array) {
  12. let characterLimit = 12;
  13. let label = this.getLabelForValue(value);
  14. if ( label.length >= characterLimit) {
  15. return label.slice(0, label.length).substring(0, characterLimit -1).trim() + '...';
  16. }
  17. return label;
  18. }
  19. }
  20. }
  21. }
  22. },
  23. };

我希望这能帮助任何和我有同样问题的人。
也许我浪费的所有时间都是因为我没有耐心地阅读每一行,但在我看来,本文档缺少更多的示例代码来访问属性和回调参数及其对象值,它只是显示对象的类型和每个类方法调用的返回,这使得没有经验的chart.js用户非常困惑。

展开查看全部

相关问题