如何通过AJAX调用使用2个不同的按钮事件在单个画布中显示2个ChartJS图
问题:如何使用ChartJS中的AJAX函数调用在同一个画布上显示两个不同的图形,这两个图形由两个不同的按钮单击(JQuery事件)触发。如何解决这个问题 引导模式:如何通过AJAX调用使用2个不同的按钮事件在单个画布中显示2个ChartJS图,ajax,chart.js,Ajax,Chart.js,问题:如何使用ChartJS中的AJAX函数调用在同一个画布上显示两个不同的图形,这两个图形由两个不同的按钮单击(JQuery事件)触发。如何解决这个问题 引导模式: <div class="modal fade" id="myModal"> <div class="modal-dialog"> <!-- Modal content--> <div
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">ChartJS Chart within Bootstrap Modal</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%; height:450px;">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<button type="button" id="btnGraphCF" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Open CF ChartJS Graph</button>
<button type="button" id="btnGraphZonation" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Open Zonation ChartJS Graph</button>
$("#btnGraphCF").click(function(){
$.ajax({
url:"graph_data.php",
method: "GET",
success: function(data) {
var horizontalItem = [];
var verticalItem = [];
var colors = [];
for (var i in data) {
horizontalItem.push(data[i].est_year);
verticalItem.push(data[i].cf_count);
colors.push(color());
}
var chartdata = {
labels: horizontalItem,
datasets: [{
label: this.labels,
data: verticalItem,
backgroundColor: colors
}]
};
if(window.barGraph!=undefined) {
window.barGraph.destroy();
}
var ctx = $("#myChart");
barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
tooltips: {
displayColors: false
},
}
});
},
error: function(data) {
console.log(data);
}
});
});
$("#btnGraphZonation").click(function(){
$.ajax({
url:"graph_data_zonation.php",
method: "GET",
success: function(data) {
var horizontalItem = [];
var verticalItem = [];
var colors = [];
for (var i in data) {
horizontalItem.push(data[i].name);
verticalItem.push(data[i].areasqm);
colors.push(color());
}
var chartdata = {
labels: horizontalItem,
datasets: [{
label: this.labels,
data: verticalItem,
backgroundColor: colors
}]
};
if(window.lineGraph!=undefined) {
window.lineGraph.destroy();
}
var ctx = $("#myChart");
lineGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
tooltips: {
displayColors: false
},
}
});
},
error: function(data) {
console.log(data);
}
});
});
即使我为每个按钮创建了两个模态,我也无法删除以前的画布