chart.js 显示带有选项值的默认图表答案

【问题标题】：chart.js display a default chart with option valuechart.js 显示带有选项值的默认图表
【发布时间】：2020-03-21 14:59:14
【问题描述】：

所以我正在使用数据库生成图表并使用 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,
      });
}

【问题讨论】：

标签： javascript php jquery json

【解决方案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();
    });
})

【讨论】：