Есть ли в Chart.js способ написать метки внутри горизонтальных полос на диаграмме "horizontalBar"
? Как в чем-то вроде:
Возможно ли что-то подобное в Chart.js?
Спасибо!
Есть ли в Chart.js способ написать метки внутри горизонтальных полос на диаграмме "horizontalBar"
? Как в чем-то вроде:
Возможно ли что-то подобное в Chart.js?
Спасибо!
Теперь есть опция «Зеркало», чтобы метка отображалась внутри панели.
Пример конфигурации "параметров" для горизонтальной гистограммы:
options: {
scales: {
yAxes: [{ticks: {mirror: true}}]
}
}
Документ: http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
Со ссылкой на оригинальное решение для отображения значения данных с использованием Метод HTML5 Canvas fillText()
в animation
onComplete
, приведенный ниже код даст вам то, что вам нужно:
Ключом к пользовательскому отображению любых данных, связанных с диаграммой, является проверка набора данных диаграммы, как показано в this.data.datasets
ниже. Я сделал это, проверив, где находятся различные значения в этом наборе данных, а также положение для их размещения для метода fillText.
Проверка набора данных диаграммы: Image
Скрипт (Chart.js 2.0 и выше):
var barOptions = {
events: false,
showTooltips: false,
legend: {
display: false
},
scales:{
yAxes: [{
display: false
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
ctx.fillStyle = '#444'; // label color
var label = model.label;
ctx.fillText(label, left + 15, model.y + 8);
}
});
}
}
};
jsFiddle: http://jsfiddle.net/jfvy12h9/
hover: { animationDuration: 1 }
отключает анимацию всплывающих подсказок, но решает проблему мерцания/включения/выключения...
- person benzkji; 25.04.2019
Вы можете добиться этого эффекта в chartjs 2.0+, повернув метки на 90 градусов и применив отрицательное заполнение, чтобы метка перемещалась вверх внутри «полосы». Что-то вроде этого:
new Chart(document.getElementById(id), {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
});
Дополнительную информацию см. в документации по настройке тиков.
Кажется, что прямого варианта для этого сейчас нет. Возможная реализация — это перебор полос/столбцов с использованием хука onAnimationComplete. Вы можете просмотреть этот вопрос для получения подробных объяснений как отображать значения данных на диаграмме. js
Я хотел бы вам напомнить, что у этого есть недостаток. Поскольку он использует onAnimationComplete, всякий раз, когда на графике происходит анимация, значения будут исчезать на секунду и появляться снова.
Так как на "гистограмме" не работает "зеркальный" вариант...
Я нашел обходное решение: Fiddle link
Я использовал версию chart.js 2.8.0, измененную по этой ссылке.
<html>
<body>
<canvas id="myChart" width="800" height="600">
</canvas>
</body>
</html>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
label: "Quota Eni mensile",
backgroundColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderWidth: 1,
data: [10, 11, 18, 10, 13, 28, 12, 16]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks:{
maxRotation: 90,
minRotation: 90,
display: "top"
},
}],
yAxes: [{
display: false
}]
},
tooltips: {
enabled: true
},
maintainAspectRatio: true,
responsive: true
}
});
Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
id: "responsiveXlabels",
beforeDraw: function(c) {
var chartHeight = c.chart.height;
var size = (chartHeight * 2.5) / 100;
var xAxis = c.scales["x-axis-0"];
xAxis.options.ticks.minor.fontSize = size;
xAxis.height = 10;
xAxis.minSize.height = 10;
c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
xAxis.margins.bottom = size * 12.5;
},
afterDraw: function(c) {
c.options.scales.xAxes[0].ticks.padding = -158;
}
});
Плагин responsiveXlabel используется для преобразования текста при изменении размера. Осталось решить только одно: выровнять текст по низу оси.
Надеюсь, это поможет тем, кто хочет реализовать зеркальное отображение по оси X и удовлетворить ответный запрос.