Du kan använda addData
och removeData
, se https://www.chartjs.org/docs/latest/developers /updates.html
. addData
lägger bara till en datauppsättning per samtal, men removeData
tar bort alla datauppsättningar från diagrammet. Det finns också sätt att trycka på etikett och datauppsättning se codepen-exempel:https://codepen.io/jordanwillis/ penna/bqaGRR
.
Det första du behöver är att spara ditt diagram i variabel, så att du enkelt kan lägga till och ta bort data. när du har sparat diagram i var, låt oss säga myChart
, kan du anropa removeData()
som:myChart.removeData()
. För att lägga till data måste du skicka etikett och data som:myChart.addData('news', [2, 32, 3])
.
Tanken är nästa, att uppdatera diagrammet när ditt ajax-samtal är framgångsrikt. Det viktiga är att ha diagraminstans i samma fil där du har ajax-anrop, du bör flytta onclick-anrop till js-fil, eller anropsfunktion från àpp.js
.
Nu beror på din datastruktur, du måste gå igenom varje och få värde och etikett. Du måste få samma resultat från data som när du skapar diagram.
KODEXEMPEL:
Vad du kommer att ha i app.js
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var op1 = [];
var op2 = [];
let data_keys = Object.keys(data[0])
console.log(data_keys)
first = data_keys[0] //1st element
second = data_keys[1] //2nd element
for(var i in data) {
op1.push(data[i][first])
op2.push(data[i][second])
}
var chartdata = {
labels: op1,
datasets : [
{
label: 'SystemID and Apparent Power (VA)',
backgroundColor: 'rgba(250, 50, 50, 0.4)',
borderColor: 'rgba(500, 50, 50, 0.5)',
hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
data: op2
}
]
};
var ctx = document.getElementById('mycanvas').getContext('2d');
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}],
yAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
function updateChartAjaxCall(data1, data2)
{
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success:function(data){
// here also manipulate data what you get to update chart propertly
myChart.removeData();
myChart.addData('newLabel', [23, 33, 4]);
},
error:function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
e.preventDefault();
}
});
Sedan bargraph.html
kommer också att ändras:
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>