Chartjs v3.x-限制画布上标签的字符串大小，而无需更改工具提示悬停字符串

Question

因此，我使用了一些非常旧的图表。JS2.x版本，但由于需要在版本3.x上找到某些功能，因此我从网站上的旧图表中更新了很多代码因为版本之间的许多语法更改。

我刚刚完成了所有图表的更新，除了一个外，它们都使用插件等很好地工作。

在此类型上：'bar'图表我在'x'轴上有一些很长的字符串，因此我需要将它们修剪成最大12个字符，但是工具提示需要显示整个字符串。旧的代码曾经是这个，并且像魅力一样工作，就在呈现图表之前，我将设置更新caledefaults：

// 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.scales [type]

中

中对象：

Chart.defaults.scales['category']

我没有尝试过任何工作。

然后，我尝试使用beforedRaw创建一个插件，以Chart.scales.x.x.ticks进行尝试，并尝试在map上使箭头函数呼叫，但我得到了$上下文是一个对象错误这样：

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;
                });
            }

我还尝试将tick回调在options上的图表创建选项中，options：scales：x：ticks但它没有任何用途。

有人可以帮我在v3.x上做到这一点吗？ 整天都在尝试很多事情，看上去并不近距离，使它变得越来越近。

Answer 1

浪费了很多小时后，我在文档应该在示例中，而不仅仅是在“标记轴”页面上突出显示。

When you do a callback for ticks on the chart options settings, you get 3 params to call:

function(value, index, ticks)

I tried in many ways to change the last one because it is the array在所有标签上的所有刻度中，它是唯一出现标签字符串的勾号，因此我试图对其进行修改。

您一开始会认为“值”参数是要更改的参数，但是它返回与每个回调迭代中的“索引”参数完全相同的整数值，所以我认为我唯一可以操纵的唯一一个可以更改的内容字符串是“ tick”阵列，但我完全错了。

实际上，您需要调用称为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用户的未经验的对象非常令人困惑。