Я работаю над проектом Chart.js. На нем у меня будет куча данных. Если пользователь хочет увидеть конкретную дату, например: (10/10/2019), я хотел бы получить все данные с этой конкретной даты, показать ему, и когда он очистит ввод, он вернется в свое нормальное состояние. На данный момент я понятия не имею, как это сделать, я искал метки диаграмм, но у меня не было успеха. Здесь - изображение моей диаграммы.
Это мой метод кнопки:
<div class="chart1">
<canvas id="mychart1" ></canvas>
<form method="post">
<p class="datafilter">Filtrar data:<input type="date" id="datafilter">
<button type="submit" id="subfilt">FILTRAR</button></p>
</form>
</div>
Это мой chart.js:
<script>
chartIt();
async function chartIt(){
var lbl = [<?php echo $labels; ?>];
var ctx1 = document.getElementById('mychart1');
var myLineChart = new Chart(ctx1, {
type: 'line',
data: {
labels: lbl,
datasets: [
{
label: "Corrente 1",
data: [<?php echo $datacor1;?>],
borderWidht: 6,
borderColor: 'red',
backgroundColor: 'transparent'
},
{
label: "Corrente 2",
data: [<?php echo $datacor2; ?>],
borderWidht: 6,
borderColor: 'blue',
backgroundColor: 'transparent'
},
{
label: "Corrente 3",
data: [<?php echo $datacor3; ?>],
borderWidht: 6,
borderColor: 'green',
backgroundColor: 'transparent'
},
{
label: "Corrente Total",
data: [<?php echo $datatotcor; ?>],
borderWidht: 6,
borderColor: 'black',
backgroundColor: 'transparent'
},
]
},
plugins: [
],
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
title: {
display: true,
fontSize: 20,
text: "Gráfico das Correntes"
},
labels: {
fontStyle: "bold",
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
tooltips: {
enabled: true,
mode: 'single',
responsive: true,
backgroundColor: 'black',
titleFontFamily: "'Arial'",
titleFontSize: 14,
titleFontStyle: 'bold',
titleAlign: 'center',
titleSpacing: 4,
titleMarginBottom: 10,
bodyFontFamily: "'Mukta'",
bodyFontSize: 14,
borderWidth: 2,
borderColor: 'grey',
callbacks:{
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index];
},
afterTitle: function(tooltipItem, data) {
var date = <?php echo json_encode($tempo) ?>
return date[tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += (tooltipItem.yLabel)+"A";
return label;
}
}
},
aspectRatio: 1,
maintainAspectRatio: false
}
});
}