Пользовательская метка данных Chart js из массива
Я хочу поместить метки данных из вычисляемого массива поверх каждого столбца. Значения в моем массиве представляют, насколько каждая полоса заполнена другим цветом. Я сделал функцию, которая вычисляет эти значения в процентах. Любой совет, что поместить в раздел форматирования меток данных?
var data1 = ['7.8', '5', '', '', '7.7', '7.8', '8.1', '7.8'];
var data2 = ['8', '8', '', '', '8', '8', '8', '8'];
var percentage = [];
function calculate() {
for (let i = 0; i < 8; i++) {
percentage.push(data1[i] / data2[i] * 100)
}
}
calculate();
var canvas = document.getElementById('myChart');
var data = {
labels: ['1','2','3','4','5','6','7','8'],
datasets: [{
// xAxisID: "bar-x-axis2",
data: data1,
backgroundColor: ['#c3cd46', '#e31c24', '#FFFFFF', '#FFFFFF', '#c3cd46', '#267533', '#267533', '#267533'],
datalabels: {
display: false,
},
}, {
data: data2,
// xAxisID: "bar-x-axis1",
datalabels: {
display: false,
},
backgroundColor: ['rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)'],
}, {
data: ['', '', '', '', '', '', '', '']
}]
};
var option = {
legend: {
display: false,
},
tooltips: {
enabled: false,
},
scales: {
yAxes: [{
scaleFontSize: 40,
scaleLabel: {
display: true,
},
ticks: {
max: 10,
min: 0,
stepSize: 2,
beginAtZero: true,
callback: function(value) {
return value + " h"
}
},
}],
xAxes: [{
barThickness: 15,
stacked: true,
}],
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: function(context) {
},
}
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы были так близки к решению.
Итак, обо всем по порядку: вам не нужен этот var percentage, мы немного изменим ваш function calculate, а также доработаем этот plugin...formatter.
Если вы хотите пропустить все этоJSFiddleдля всего измененного кода.
По сути, средство форматирования может предоставить вам текущий объект, который будет включать в себя dataIndex, который мы можем использовать в функции вычисления, вместо того, чтобы каждый раз зацикливать все наборы данных.
function calculate(i){
return (data1[i] / data2[i] * 100)
}
Примечание: аргумент "я" будет передан форматтером (chart_obj.dataIndex).
Форматер будет выглядеть так, обратите внимание на второй аргумент chart_obj
formatter: function(context, chart_obj) {
return calculate(chart_obj.dataIndex); //pass the current data index to calculate
}
Наконец, нам нужно установить второйdatalabels.display = true
more above ...
data: data2,
// xAxisID: "bar-x-axis1",
datalabels: {
display: true,
}
... more bellow
Надеюсь, это поможет!
Хорошее кодирование
EDIT
Использование plugin option изменяет данные для ВСЕХ ярлыков, в этом случае я поместил formatter прямо на dataset
{
data: data2,
// xAxisID: "bar-x-axis1",
datalabels: {
display: true,
formatter: function(context, chart_obj) {
return calculate(chart_obj.dataIndex)
},
}
@ZeroZek, я исправил это. По сути, plugins.formatter изменит параметры для ВСЕХ меток этой диаграммы. jsfiddle.net/1mp8x4ay Чтобы решить эту проблему, я поставил formatter прямо в набор данных.
Как сделать так, чтобы проценты не печатались дважды? Один раз находится в верхней части панели, а второй выход немного выше нижнего? Потому что мне нужно напечатать его только один раз.