#javascript #chart.js
#javascript #chart.js
Вопрос:
я добавляю анимацию для отображения данных о значениях меток в точках значений в линейной диаграмме js. но когда я нажимаю на легенду, чтобы скрыть строку, метка не исчезает. честно говоря, я действительно не имею ни малейшего понятия, как это исправить.
диаграмма после скрытия некоторой строки с легендой
var ctxTotal = $("#grap_trajec_divisi");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var dataM = tooltipItems.yLabel;
formatM(dataM);
var multistringText = [data_M];
multistringText.push(tooltipItems.yLabel);
multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
return multistringText;
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
callback: function (value, index, values) {
var dataYaxis = value;
formatM(dataYaxis);
return data_M;
}
},
}]
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '.7rem "Calibri",sans-serif';
ctx.fillStyle = '#555';
ctx.textAlign = "center";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
});
}
}
//title: {
// display: true,
// text: 'Chart.js Line Chart - proyeksi'
//}
};
var chartData = {
labels: arr,
datasets: [{
label: "RKAP",
data: value_LT,
fill: false,
borderColor: "rgb(89,159,240)",
pointBorderColor: "rgb(89,159,240)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Target",
data: value_LT2,
fill: false,
borderColor: "rgb(186,179,61)",
pointBorderColor: "rgb(186,179,61)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Actual",
data: value_LO,
fill: false,
borderColor: "rgb(78,199,138)",
pointBorderColor: "rgb(78,199,138)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Proyeksi",
data: value_LP,
fill: false,
borderColor: "rgb(241,151,89)",
pointBorderColor: "rgb(241,151,89)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}],
};
var config = {
type: 'line',
options: chartOptions,
data: chartData
};
if (window.chartTrajecDivisi != undefined) {
window.chartTrajecDivisi.destroy();
}
window.chartTrajecDivisi = new Chart(ctxTotal, config);
я хочу скрыть метку при скрытии строки, щелкнув по метке, чтобы метка и строка скрывались / показывались вместе.
Комментарии:
1. привет, @Yudha Adtia, у тебя есть какой-нибудь пример скрипки?
2. вот скрипка jsfiddle.net/3qda8p1o/1
3. ваша скрипка не работает…
4. недостаточно ли диаграммы js? я думаю, что моя проблема только в диаграмме (анимация / обратный вызов / легенда)
5. Я хотел бы увидеть «бегущую» диаграмму, чтобы помочь вам лучше
Ответ №1:
Я думаю, это работает.
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
}
});
Ответ №2:
я нашел ответ на этот вопрос. просто удалите анимацию и используйте плагин datalabel chart js.
Комментарии:
1. Еще один вопрос, когда многие придут за помощью и просто найдут «я решил свою проблему».
2. Согласен @RomuloPBenedetti — пожалуйста, добавьте подробное объяснение решения