如何在不影响工具提示的情况下限制轴上的Chart.js标签长度

4xrmg8kj 于 2022-11-23 发布在 Chart.js

关注(0)|答案(1)|浏览(129)

我尝试在XAxis上的子字符串标签文本，因为它们太长了。当鼠标悬停在一个条上时，标签也会显示。问题是当我在标签上添加子字符串时，两边的文本都会受到影响，这是我不希望看到的。我只想在XAxis上添加子字符串文本。可以吗？
下面是我正在使用的代码：

var memX = [];
var memY = [];

$(data.mem).each(function() {
    memX.push(splitLabel(this.name));
    memY.push(this.cnt);
});

var memData = { 
    labels: memX, 
    datasets: [{ label:'Members', data: memY, borderWidth:1, backgroundColor:'rgba(125, 199, 85, 0.7)' }] };

    new Chart(document.getElementById(id + '_members'), { 
    type: 'bar', 
    data: memData, 
    options: { 
        responsive: true, 
        scales: { 
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        animation: {
            duration: 500
        }
    }
});

以下是屏幕截图：

chart.js

来源：https://stackoverflow.com/questions/44640302/how-to-limit-chart-js-label-length-on-axes-without-affecting-tooltips

1条答案

按热度按时间

c2e8gylq1#

"是的“"这是可能的”
从屏幕截图中可以看出，您使用的是多行标签。如果是这种情况，您可以使用下面的x轴刻度和工具提示回调函数分别修剪x轴上的标签和在工具提示上显示完整的文本。

X轴刻度回调*（用于修剪标签）*

xAxes: [{
   ticks: {
      callback: function(label) {
         return label[0];
      }
   }
}]

工具提示标题回调*（用于显示完整文本）*

tooltips: {
   callbacks: {
      title: function(t, d) {
         return d.labels[t[0].index];
      }
   }
}

工作示例：

第一次

赞(0）回复(0）举报 2022-11-23

我来回答

如何在不影响工具提示的情况下限制轴上的Chart.js标签长度

1条答案

相关问题

热门标签

最新问答