Chart.JS: Как я могу отображать метки данных только тогда, когда ширина полосы достаточно велика для текста?
Я использую Диаграмма.JS с Плагин меток данных Chart.JS. Можно ли отображать метки данных только тогда, когда ширина полосы достаточно велика для текста?
У меня есть следующий пример:
https://jsfiddle.net/f5p3twcg/2/
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
options: {
plugins: {
datalabels: {
color: '#000000',
display: true,
formatter: function(value, ctx) {
return value + "kWh";
}
}
}
},
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2", "Red3", "Blue3", "Yellow3", "Green3", "Purple3", "Orange3", "Red4", "Blue4", "Yellow4", "Green4", "Purple4", "Orange4"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
]
}]
}
});
Я знаю, этот пример не имеет никакого смысла, но вы можете видеть проблему.
Если данных много, метки данных выходят за пределы ширины полосы следующим образом:
Есть ли возможность указать Chart.JS показывать эти метки только тогда, когда текст помещается в полосу? (В противном случае просто покажите всплывающие подсказки).
Полезно знать, но мне это не помогает... Я не хочу снова переключать библиотеку диаграмм, потому что она уже используется в нескольких проектах...
Ответы 2
Если график не меняет размер динамически, вы можете получить ширину полосы после создания экземпляра диаграммы с помощью
var width = myChart.getDatasetMeta(0).data[0]._model.width;
и перепишите средство форматирования, чтобы проверить, не превышает ли ширина текста ширину полосы
formatter: function (value, ctx) {
function getTextWidth(text, font) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
return getTextWidth(value + "kWh") > width ? "" : value + "kWh";
}
Пожалуйста, обратите внимание на тот факт, что я проигнорировал шрифт в предыдущем примере, поэтому вам придется извлекать его вручную, если будут внесены какие-либо изменения.
Возможно, вы могли бы даже написать плагин, который будет записывать в переменную var width перед рендерингом.
plugins: [
ChartDataLabels,
{
beforeRender: (myChart) => { width = myChart.getDatasetMeta(0).data[1]._model.width;}
}
],
Привет, нет, диаграмма печатается только один раз или полностью обновляется (что означает, что она печатается снова). Я попробую ваше решение.
Спасибо большое. Он работает, как и ожидалось, после того, как я внес небольшие корректировки (см. Мой ответ здесь).
Решение от Кшиштоф Кшешевский работает. Однако мне пришлось немного подкорректировать его и добавить несколько проверок на 'undefined' в моем случае:
if (typeof chart !== 'undefined') {
let datasetData = chart.getDatasetMeta(0);
if (datasetData !== 'undefined') {
if (datasetData.data.length > 0) {
barWidth = chart.getDatasetMeta(0).data[0]._model.width;
}
}
}
Я знаю, что такое поведение является стандартным для ZoomCharts (zoomcharts.com) (поскольку я являюсь частью команды, стоящей за этим) ;)