Du kan bruge addData
og removeData
, se https://www.chartjs.org/docs/latest/developers /updates.html
. addData
tilføjer kun ét datasæt pr. opkald, men removeData
fjerner alle datasæt fra diagrammet. Der er også en måde at skubbe etiket og datasæt på, se kodepen-eksempel:https://codepen.io/jordanwillis/ pen/bqaGRR
.
Det første, du skal bruge, er at gemme dit diagram i variabel, så du nemt kan tilføje og fjerne data. når du har gemt diagram i var, lad os sige myChart
, kan du kalde removeData()
som:myChart.removeData()
. For at tilføje data skal du sende etiket og data som:myChart.addData('news', [2, 32, 3])
.
Ideen er den næste, at opdatere diagrammet, når dit ajax-opkald er succesfuldt. Det vigtige er at have en diagramforekomst i samme fil, hvor du har et ajax-kald, du skal flytte onclick-kald til js-fil eller opkaldsfunktion fra àpp.js
.
Nu afhænger af din datastruktur, du skal gennemgå hver og få værdi og etiket. Du skal få samme resultat fra data, som du har, når du opretter diagram.
KODEEKSEMPEL:
Hvad du vil have 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();
}
});
Derefter bargraph.html
vil også blive ændret:
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>