如何通过AJAX调用使用2个不同的按钮事件在单个画布中显示2个ChartJS图

如何通过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

问题:如何使用ChartJS中的AJAX函数调用在同一个画布上显示两个不同的图形,这两个图形由两个不同的按钮单击(JQuery事件)触发。如何解决这个问题

引导模式:

<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">&times;</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);
        }
    });
});
即使我为每个按钮创建了两个模态,我也无法删除以前的画布