Я работаю над одним проектом, в котором я использую Графики. js для отображения графиков. Здесь я хочу показать все значения бара по умолчанию в верхней части каждого бара (Использование чата на панели ), когда мы наводим указатель мыши на эту полосу, она показывает значение, но есть ли какая-либо возможность показать эту всплывающую подсказку по умолчанию без наведения на нее
Ниже приведен пример скрипта. Здесь, в этой скрипке, я хочу показать 60, 30,40 по умолчанию на линейчатой диаграмме по умолчанию без наведения на нее.
Здесь на скриншоте выше я попытался поместить все всплывающие подсказки как по умолчанию, но так как используются 3 графика, он показывает подсказку для всех графики, но я хочу поместить всплывающую подсказку только на гистограмму, я знаю, что это немного сложно, но будет какой-то способ, с помощью которого я смогу решить мою проблему. Пожалуйста, ведите меня, вот мой код, снятый с JS
getchart();
function getchart() {
$("#barChart").remove();
const decimals = 3;
$(".chart").append("<canvas id='barChart' width='692' height='346'></canvas>");
var ctx = document.getElementById("barChart");
Chart.pluginService.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
console.log(chart);
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
}
chart.options.tooltips.enabled = false;
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})
var barChart;
barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['30', '45', '60', '90', '120', '120+'],
datasets: [{
type: 'bar',
label: 'Receivable',
data: [730, 492.5, 120, 4732.5, 2760.85, 0],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
type: 'line',
label: 'Past Due',
data: [1500, 1500, 1500, 1500, 1500, 1500],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}, {
type: 'line',
label: 'Invoice',
data: [1000, 1000, 1000, 1000, 1000, 1000],
backgroundColor: 'rgba(75, 00, 150, 0.2)',
borderColor: 'rgba(75, 00, 150,1)',
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Days'
},
}],
yAxes: [{
display: true,
stacked: true,
scaleLabel: {
display: true,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}, {
id: 'invoice-amount',
display: false,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Dollar Amount'
},
ticks: {
beginAtZero: true,
}
}]
},
showAllTooltips: true,
}
});
}