Я использую chartjs для визуализации некоторых данных на диаграмме. Этикетки довольно длинны, поэтому я их разрезал. Тем не менее, я хотел бы, чтобы текст для всплывающих подсказок (на hover) был оригинальным. Могу ли я достичь этого с помощью конфигурации по умолчанию chartjs?
Для генерации диаграмм я использую следующее:
function DrawChart(canvasID, remoteFields, remoteData, remoteColors, remoteBorderColors) {
var ctx = document.getElementById(canvasID).getContext('2d');
var orig = remoteFields;
var maxLabelLength = 20;
for(var i = 0; i < remoteFields.length; i++) {
if(remoteFields[i].length > maxLabelLength) {
remoteFields[i] = remoteFields[i].substring(0,maxLabelLength) + "...";
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: remoteFields,
datasets: [{
data: remoteData,
backgroundColor: remoteColors,
borderColor: remoteBorderColors,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
}
}]
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
}
}
});
}
Вы можете добиться этого, используя функцию обратного вызова тиков (для обрезки меток оси x) и функцию обратного вызова всплывающих подсказок (чтобы отобразить исходный текст на всплывающих подсказках)
var ctx = document.getElementById('c').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
callback: function(t) {
var maxLabelLength = 3;
if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
else return t;
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index];
}
}
}
}
});
<script src="/Chart.min.js"></script>
<canvas id="c" width="350" height="200"></canvas>