я не знаю, как добавить текст в метку JavaScript диаграммы. Моя диаграмма используется на ПК и планшете.
сейчас диаграмма

Но мне нужно пометить чувствительные зоны примерно так:


<canvas id = "myChart" width = "500" height = "400"></canvas>
==== Мой код (в данных 1 этикетки 12 месяцев - 10 лет = 1 полоса)
var color = Chart.helpers.color;
var barChartData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
type: 'bar',
label: '<?php echo $year9+543; ?>',
fill: false,
borderColor: "rgba(235,189,139,1)",
data: <? php echo $data_target9_month; ?>
}, ... Array data ...
редактировать график
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
line: {
tension: 0
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (parseInt(value) >= 1000) {
return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
if (parseInt(value) == 0) {
return data.datasets[tooltipItem.datasetIndex].label + " : " + 'ไม่มีข้อมูล';
}
else {
return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value;
}
}
} // end callbacks:
}
}
})
благодаря.
Непонятно, чего ты хочешь. Глядя на второе изображение, которое вы предоставили, я все еще не очень хорошо понимаю, что вам нужно. Вы хотите добавить эти поля с соответствующими названиями месяцев?
@ M'Instrucs проверит мой ответ и дайте мне знать, если это поможет.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Это наверняка достижимо с использованием методов Chart.JS, но лучший и самый простой способ сделать это - просто перекрыть тексты, которые вы хотите добавить, используя position: absolute; в каждом текстовом поле.
Взгляните на этот JSFiddle: https://jsfiddle.net/gxjw5hLb/
Конечно, вам нужно будет вычислить и заменить значения для каждого "X",
<td><span>X=1000</span></td>
<td><span>X=2500</span></td>
<td><span>X=3000</span></td>
Также для ящиков потребуется дополнительный стиль CSS.
@ M'Instrucs, на мобильных это выглядит плохо, потому что для простоты я привязал текст к верхней части страницы. Вы можете обернуть диаграмму и текст в родительский контейнер, сделав эту оболочку position: relative;, и тогда текст будет автоматически адаптироваться к размеру диаграммы. Попробуйте и дайте мне знать, если у вас возникнут проблемы.
@ M'Instrucs ответ оказался полезным? Вам нужны дополнительные указания?
Покажите, пожалуйста, свой код.