Chart.js 极限标记试验

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

以下是屏幕截图：

---

是的这是可能的

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

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

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

---

工作示例：

var ctx=canvas.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[
[‘公司’、‘会员’、‘活动’]，
['Group'、'Membership'、'（Active）'，
['Muncipal'、'level2'、'（300000-499999）'、（Active）'，
['Muncipal'、'Level 5'、'（100000-399999）'、（Active）'，
[‘大学’、‘会员’、‘活动’]
],
数据集：[{
标签：'成员'，
数据：[2,4,1,3,5]，
背景颜色：“rgba（2，215，6，0.3）”，
边框颜色：“rgba（2,215,6,0.4）”，
}]
},
选项：{
比例：{
xAxes：[{
滴答声：{
回调：函数（标签）{
返回标签[0]；
}
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
回调：{
标题：功能（t，d）{
返回d.labels[t[0].index]；
}
}
}
}
});
是这是可能的

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

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

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


工作示例：


var ctx=canvas.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[
[‘公司’、‘会员’、‘活动’]，
['Group'、'Membership'、'（Active）'，
['Muncipal'、'level2'、'（300000-499999）'、（Active）'，
['Muncipal'、'Level 5'、'（100000-399999）'、（Active）'，
[‘大学’、‘会员’、‘活动’]
],
数据集：[{
标签：'成员'，
数据：[2,4,1,3,5]，
背景颜色：“rgba（2，215，6，0.3）”，
边框颜色：“rgba（2,215,6,0.4）”，
}]
},
选项：{
比例：{
xAxes：[{
滴答声：{
回调：函数（标签）{
返回标签[0]；
}
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
回调：{
标题：功能（t，d）{
返回d.labels[t[0].index]；
}
}
}
}
});

鼠标悬停时出现的图像上的蓝色框。嗯。。我的意思是，子字符串之后的x轴标签应该是什么？我只是希望它更短，因为有些标签太长了。例如，我的一个标签是“Corporate Membership（Active）”，我只希望它类似于“Corporate”，但在显示全文“Corporate Membership（Active）”的弹出框中，鼠标悬停时图像上出现的蓝色框。嗯。。我的意思是，子字符串之后的x轴标签应该是什么？我只是希望它更短，因为有些标签太长了。例如，我的一个标签是“企业会员（活动）”，我只希望它类似于“企业”，但在弹出框中显示全文“企业会员（活动）”
xAxes: [{
   ticks: {
      callback: function(label) {
         return label[0];
      }
   }
}]

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