Question

我正在尝试使用Charts.js v2库设置条形图。

我遇到的问题是我想将x轴标签格式化为工具提示标签。

例如，如果我在x轴上有一个类似“将要修剪的超长标签”的标签，下面的代码将显示为“超长标签......”。

Chart.scaleService.updateScaleDefaults('category', {
  ticks: {
    callback: function(tick) {
        var characterLimit = 20;
        if ( tick.length >= characterLimit) {
            return tick.slice(0, tick.length).substring(0, characterLimit -1).trim() + '...';;
        } 
        return tick;
    }
  }
});

完全小提琴：https://jsfiddle.net/kvszjr7g/3/

这是正常的。

但是，当您将鼠标悬停在条形图上时显示的工具提示也会被修剪。我想要的是标签的全文显示在工具提示中。

我尝试在上面的方法中使用字符串的副本，这就是我添加tick.slice的原因。无论我到目前为止做了什么，都会影响x轴标签和工具提示标签。

我现在很迷茫，最好的办法是什么？

Answer 1

首先，您最好直接从图表的选项中编辑图表属性，而不是像您那样在比例服务中编辑图表属性，以免影响页面上的每个图表（如果您有几个）。

要实现您已经完成的工作，请添加您在选项中使用的功能：

options: {
    scales: {
        xAxes: [{
            ticks: {
                callback: function(tick) {
                    var characterLimit = 20;
                    if (tick.length >= characterLimit) {
                        return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim() + '...';
                    }
                    return tick;
                }
            }
        }]
    },
}

它基本上是对xAxe上显示为标签的内容的编辑。

<小时/> 但是，我们仍然遇到同样的问题：标签和工具提示都显示修剪后的字符串。

要修复它，您还需要编辑工具提示的回调：

options: {
    // other options here, `scales` for instance
    // ...
    tooltips: {
        callbacks: {

            // We'll edit the `title` string
            title: function(tooltipItem){
                // `tooltipItem` is an object containing properties such as
                // the dataset and the index of the current item

                // Here, `this` is the char instance

                // The following returns the full string
                return this._data.labels[tooltipItem[0].index];
            }
        }
    }
}

<小时/> 你可以看到一个完整的例子in this jsFiddle，结果如下：

chart.js不同的x轴和工具提示格式

1 个答案: