Можете да използвате addData
и removeData
, вижте https://www.chartjs.org/docs/latest/developers /updates.html
. addData
добавя само един набор от данни на извикване, но removeData
премахва всички набори от данни от диаграмата. Има също така начин да натиснете етикет и набор от данни, вижте примера на codepen:https://codepen.io/jordanwillis/ писалка/bqaGRR
.
Първо, от което се нуждаете, е да запазите диаграмата си в променлива, за да можете лесно да добавяте и премахвате данни. когато имате записана диаграма във var, да кажем myChart
, можете да извикате removeData()
като:myChart.removeData()
. За добавяне на данни трябва да изпратите етикет и данни като:myChart.addData('news', [2, 32, 3])
.
Идеята е следващата, да актуализирате диаграмата, когато вашето ajax извикване е успешно. Важното е да имате екземпляр на диаграма в същия файл, където имате ajax извикване, трябва да преместите onclick извикване към js файл или да извикате функция от àpp.js
.
Сега зависи от вашата структура на данни, ще трябва да преминете през всяка и да получите стойност и етикет. Трябва да получите същия резултат от данните, каквито имате, когато създавате диаграма.
ПРОБА ЗА КОД:
Какво ще имате в 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();
}
});
След това bargraph.html
също ще бъде променен:
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>