#javascript #chart.js
#javascript #chart.js
Вопрос:
Я начал внедрять сгруппированную столбчатую диаграмму, используя chart.js . Одна группа имеет два столбца — первая оценка и вторая оценка. При нажатии на столбики (каждый) он должен быть направлен на подробную страницу с определенными параметрами (значения параметров различны для каждого столбца).
- В этом случае я не могу различать значения оси X-Y и разные столбцы (1-й или 2-й).
- Событие onclick запускается даже за пределами панели (в том числе на панели)
Я ожидаю вашей помощи для решения вышеупомянутой проблемы
Это формат реализованной диаграммы.
success: function (chData) {
var aData = chData;
if (aData.monthText != 0) {
$('#lblnodata').html(' ');
var FirstEvaluationData = [];
var SecondEvaluationData = [];
var FirstOrder = [];
var SecondOrder = [];
for (i = 0; i < aData.firstMonthEvaluation.length; i ) {
FirstEvaluationData.push(aData.firstMonthEvaluation[i].evaluationScore);
FirstOrder.push(aData.firstMonthEvaluation[i].evaluationId);
}
for (i = 0; i < aData.secondMonthEvaluation.length; i ) {
SecondEvaluationData.push(aData.secondMonthEvaluation[i].evaluationScore);
SecondOrder.push(aData.secondMonthEvaluation[i].evaluationId);
}
var pointBackgroundColors = [];
var point2BackgroundColors = [];
var ctx = $("#myChart").get(0).getContext("2d");
var myNewMonthChart = new Chart(ctx, {
type: 'bar',
responsive: true,
animation: true,
showDatapoints: true,
data: {
labels: aData.monthText,
datasets: [
{
datalabels: {
color: 'black',
font: {
weight: 'bold'
}
},
label: "1stEvaluation",
data: FirstEvaluationData,
order: FirstOrder,
//backgroundColor: "#3cba9f",
backgroundColor: pointBackgroundColors,
borderColor: "#ccc",
borderWidth: 1
},
{
datalabels: {
color: 'black',
font: {
weight: 'bold'
}
},
label: "2ndEvaluation",
data: SecondEvaluationData,
order: SecondOrder,
//backgroundColor: "#e8c3b9",
backgroundColor: point2BackgroundColors,
borderColor: "#ccc",
borderWidth: 1
}
]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem) {
var label = tooltipItem.label;
var score = tooltipItem.yLabel;
return label, score '%';
}
},
filter: function (tooltipItem, data) {
var value = tooltipItem.value;
if (value == 50.5348) {
return false;
} else {
return true;
}
}
},
onClick: function (c, data) {
debugger
e = data[0];
var name = this.data.labels[e._index];
var y_value = this.data.datasets[0].data[e._index];
var id = this.data.datasets[0].order[e._index];
if (y_value == 50.5348) {
Pending(name, EmployeeId);
}
else {
Evaluation(name, EmployeeId);
}
},
responsive: true,
title: { display: true, text: 'Evaluation Graph For Current Period' },
legend: { position: 'top' },
scales: {
xAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: 'Evaluation Dates' }, barPercentage: 1.0, categoryPercentage: 0.6 }],
yAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: 'Score in ( % )' }, ticks: { beginAtZero: true } }]
},
plugins: {
datalabels: {
formatter: function (value, context) {
if (value == 50.5348) {
return "pending"
}
else {
return context.dataset.label;
}
}
}
}
}
});
for (i = 0; i < myNewMonthChart.data.datasets[0].data.length; i ) {
if (myNewMonthChart.data.datasets[0].data[i] == 50.5348) {
pointBackgroundColors.push("#e7e7e7");
} else {
pointBackgroundColors.push("#00c0ef");
}
}
for (i = 0; i < myNewMonthChart.data.datasets[1].data.length; i ) {
if (myNewMonthChart.data.datasets[1].data[i] == 50.5348) {
point2BackgroundColors.push("#e7e7e7");
} else {
point2BackgroundColors.push("#dd4b39");
}
}
myNewMonthChart.update();
}
else {
$("#myChart").remove();
$('#lblnodata').css('display', 'block');
$('#lblnodata').html('<h3>No Data For Selected Periods</h3>');
}
}