chart.js 顯示帶有選項值的默認圖表

Question

所以我正在使用數據庫生成圖表並使用 JSON 腳本顯示它們並且它工作正常但是圖表僅在我單擊選項值時顯示，我現在要做的是為網站打開時設置默認值選項如果有意義，它會顯示默認圖表，下面是我的 chart.js 代碼。

function renderHtmlChart(){
    $(document).ready(function (){
    var selection= document.getElementById('YEAR').value;
    var link = "https://udon.ads.ntu.ac.uk/web/itec30151/N0773065/new/data.php?YEAR='"+selection+"'";
  $.ajax({
    url: link,
    method: "GET",
    success: function(data=this.responseText) {
      console.log(data);
      var Destination = [];
      var Bookings = [];

      for(var i in data) {
        Destination.push(data[i].Destination);
        Bookings.push(data[i].Bookings);
      }

createChart(Destination,Bookings,selection)      

    },
    error: function(data) {
      console.log(data);
    }
  });
});
}

function createChart(Destination,Bookings,selection){

      var universalOptions = {
        maintainAspectRatio: true,
        responsive: false,
         title: {
            display: true,
            text: 'Top 5 Flight Bookings'
        },
        legend: {
            display: true,
        },
        scales: {
            yAxes: [{
                ticks: {
                        beginAtZero: true,
               },
                scaleLabel: {
                display: true,
                labelString: 'Bookings'
                }
            }],
            xAxes: [{
                scaleLabel: {
                display: true,
                labelString: 'Destinations'
                }
            }],

        }
    }

    var chartdata = {
        labels: Destination,
        datasets : [
          {
            label: selection,
            data: Bookings,
            backgroundColor: ["#3366cc","#dc3912","#ff9900","#109618","#990099"], 
            borderWidth: '1', 
            borderColour: 'grey', 
            hoverBorderColor: 'black',
            fill: false,
            pointRadius: 0,
          }
        ]
      };

//stop overlap
    $('select').on('change',function(){
        barGraph.destroy();
    });

// this makes legend hidden
    var update_caption = function(legend) {
        labels[legend.text] = legend.hidden;
        var selected = Object.keys(labels).filter(function(key) {
        return labels[key];
        });    
    };
//this creates new graph
var ctx = document.getElementById('myChart');


      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options: universalOptions,
        responsive: false,
      });
}

Answer 1

希望您擁有最新版本的 jquery，例如：-

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

希望這會有所幫助

//create renderHtmlChart function  

function renderHtmlChart()
{

    var selection= document.getElementById('YEAR').value;
    var link = "https://udon.ads.ntu.ac.uk/web/itec30151/N0773065/new/data.php?YEAR='"+selection+"'";
      $.ajax({
                url: link,
                method: "GET",
                success: function(data=this.responseText) 
                {
                      console.log(data);
                      var Destination = [];
                      var Bookings = [];

                      for(var i in data) 
                      {
                        Destination.push(data[i].Destination);
                        Bookings.push(data[i].Bookings);
                      }
                            createChart(Destination,Bookings,selection)      

                },
                error: function(data) 
                {
                        console.log(data);
                }
            });

}

//create createChart function  

function createChart(Destination,Bookings,selection)
{

      var universalOptions = 
      {
            maintainAspectRatio: true,
            responsive: false,
             title: 
             {
                display: true,
                text: 'Top 5 Flight Bookings'
            },
            legend: 
            {
                display: true,
            },
            scales: 
            {
                yAxes: [{
                    ticks: {
                            beginAtZero: true,
                   },
                    scaleLabel: {
                    display: true,
                    labelString: 'Bookings'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                    display: true,
                    labelString: 'Destinations'
                    }
                }],

            }
    }

    var chartdata = {
        labels: Destination,
        datasets : [
          {
            label: selection,
            data: Bookings,
            backgroundColor: ["#3366cc","#dc3912","#ff9900","#109618","#990099"], 
            borderWidth: '1', 
            borderColour: 'grey', 
            hoverBorderColor: 'black',
            fill: false,
            pointRadius: 0,
          }
        ]
      };



// this makes legend hidden
    var update_caption = function(legend) {
        labels[legend.text] = legend.hidden;
        var selected = Object.keys(labels).filter(function(key) {
        return labels[key];
        });    
    };
//this creates new graph
var ctx = document.getElementById('myChart');


      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options: universalOptions,
        responsive: false,
      });
}


$(funtion(){
    //onload call renderHtmlChart function
    renderHtmlChart();
    //on select input change call renderHtmlChart function
    $('select').on('change',function(){
        renderHtmlChart();
    });
})