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

4xrmg8kj  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(140)

我尝试在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
        }
    }
});

以下是屏幕截图:

c2e8gylq

c2e8gylq1#

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

X轴刻度回调*(用于修剪标签)*

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

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

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

工作示例:

第一次

相关问题