getJSON With，然后。不调用数组吗？

时间：2018-11-27 04:43:00

标签： javascript jquery html css

我正在使用“ chart.js”；首先调用我的数据图，并到达我的'$ .getJSON'数据请求。我相信我没有正确地将字符串推入数组“ ChartData”中。我的控制台日志已达到所需的数据字符串。我的语法不正确，无法在“ $ .getJSON”之后立即调用函数？ 任何帮助，将不胜感激。谢谢

const BASE_URL = "https://zagster-service.herokuapp.com"


const G5_TC = "/rides/count/g5"
const COL_TC = "/rides/count/columbia_simpson"
const DRAKE_TC = "/rides/count/drake_park"
const GALV_TC = "/rides/count/galveston"
const GRC_TC = "/rides/count/grc"
const OLD_TC = "/rides/count/old_mill"
const OSU_TC = "/rides/count/osu_cascades"
const TEN_TC = "/rides/count/ten_barrel"

var ChartData = [];


$(updateView)

function updateView() {

   $.when(
        $.getJSON(BASE_URL + G5_TC, updateChartData00), 
            
        $.getJSON(BASE_URL + COL_TC, updateChartData01), 
            
        $.getJSON(BASE_URL + DRAKE_TC, updateChartData02),
         
        $.getJSON(BASE_URL + GALV_TC, updateChartData03),
                    
        $.getJSON(BASE_URL + GRC_TC, updateChartData04),
    
        $.getJSON(BASE_URL + OLD_TC, updateChartData05),
               
        $.getJSON(BASE_URL + OSU_TC, updateChartData06),
           
        $.getJSON(BASE_URL + TEN_TC, updateChartData07)
        
   ).then(displayGraph);

}

function updateChartData00(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData01(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData02(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData03(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData04(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData05(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData06(data) {
    console.log(data);
ChartData.push(data.count)
}

function updateChartData07(data) {
    console.log(data);
ChartData.push(data.count)
}


/*
 Console log Strings 
function updateChartData00(data) {
	console.log(data)
}
function updateChartData01(data) {
	console.log(data)
}
function updateChartData02(data) {
	console.log(data)
}
function updateChartData03(data) {
	console.log(data)
}
function updateChartData04(data) {
	console.log(data)
}
function updateChartData05(data) {
	console.log(data)
}
function updateChartData06(data) {
	console.log(data)
}
function updateChartData07(data) {
	console.log(data)
}
function ChartData(data) {
	console.log(data)
}
*/

/* Visualization JS- Source:"https://www.chartjs.org/docs/latest/charts/bar.html" */


function displayGraph() {
var ctx = document.getElementById("myChart").getContext('2d')
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["G5", "Columbia/Simpson", "Drake Park", "Galveston", "GRC", "Old Mill", "OSU-Cascades", "Ten Barrel"],
        datasets: [{
            label: 'Total Count of Rides Per Station',
            data: ChartData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(58,112,42,0.2)',
                'rgba(76,212,40,0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(54, 162, 217, 1)',
                'rgba(76,242,40,1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
      
      legend: {
            labels: {
                fontColor: 'white',
                fontSize: 15.5
            }
        },

      scales: {
            xAxes: [{gridLines: {
                      display: false ,
                      color: 'rgba(255,255,255, 0.8)'
                   },
                    ticks: {
                      fontColor: 'white',
                      fontSize: 14
                    }
            }]  ,

            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'white',
                    fontSize: 14
                },
                gridLines: {
                      display: false ,
                      color: 'rgba(255,255,255, 0.8)'
                },  
            }]

        }
    }
  
});

}



/* Drop Down Function-Nav Bar  -----**Source**:https://www.w3schools.com/css/css_dropdowns.asp" */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it-----**Source**:https://www.w3schools.com/css/css_dropdowns.asp" //
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
      if (myDropdown.classList.contains('show')) {
        myDropdown.classList.remove('show');
      }
  }
}

/*
 * Globals
 */


/* Links */

a,
a:focus,
a:hover {
  color: #fff;
}


/* Lists: Under "Drop-Down button: Portfolio"= "dropbtn" */

ul {
  margin-left: -3.7px;
}

li {
  padding-left: 0px;
  margin-left: -2.1px;
}

.dropdown-list {
  list-style-type: circle;
}


/*
 * Base structure
 */

html,
.body-zagster {
  height: 100%;
  background-color: #333;
  text-align: center;
}

.body-zagster {
  background-image: url('https://i.imgur.com/VhscY63.jpg?1');
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

body {
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.65);
}

h1 {
  font-family: 'Ubuntu', sans-serif;
}

h2,
h3 {
  font-family: 'Nanum Gothic', sans-serif;
}

nav,
p {
  font-family: 'KoHo', sans-serif;
}

.box-transp-zagster {
  background: rgba(0, 0, 0, 0.65);
  border-radius: 25px;
  max-width: 700px;
  margin: 0 auto;
}

.box-transp-footer {
  background: rgba(0, 0, 0, 0.41);
  border-radius: 35px;
  padding: 0px 20px;
  max-width: 600px;
  margin: 0 auto;
  overflow: auto;
}

.cover-container {
  max-width: 65em;
}


/* Image Modifiers */

.vis-img {
  margin: 0 auto;
  width: 73%;
  height: 73%;
}


/*
 * Cover
 */

.cover {
  padding: 0 1.5rem;
}


/*
 * Header
 */

.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link,
.nav-masthead .dropbtn {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(216, 216, 216, 0.473);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus,
.nav-masthead .dropbtn:hover,
.nav-masthead .dropbtn:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link+.nav-link,
.dropbtn {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Dropdown Button 
 */

.dropbtn {
  border: none;
  cursor: pointer;
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.65);
}


/* Position of dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 15px;
  min-width: 10em;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 0px 14px;
  float: center;
  text-decoration: none;
  display: block;
}


/* Show the dropdown menu */

.show {
  display: block;
}


/*
 * Footer
 */

.mastfoot {
  color: rgba(255, 255, 255, .5);
}


/*
 * Data Visualization Source: "https://www.chartjs.org/docs/latest/charts/bar.html"
 */
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="This is Zagster bike share data">
  <meta name="author" content="Felipe C Arreola">
  <link rel="icon" href="https://i.imgur.com/wdOId0h.png">

  <title>Zagster Bike Share in Bend</title>

  <!--Data Visualization (DV)
           Source: "https://www.chartjs.org/docs/latest/charts/bar.html"-->

  <!--DV JavaScript-->

  <script scr="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  <!--DV core CSS-->

  <!--JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script src="main.js"></script>

  <!-- Bootstrap core CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">


  <!-- Custom styles -->
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=KoHo|Nanum+Gothic|Ubuntu" rel="stylesheet">

</head>

<body class="body-zagster">

  <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

    <header class="masthead mb-auto">
      <div class="inner">
        <h3 class="masthead-brand">Portfolio: Zagster Client</h3>
        <nav class="nav nav-masthead justify-content-center">
          <a class="nav-link" href="https://felipecarreola.github.io/index.html">Home</a>
          <a class="nav-link" href="https://felipecarreola.github.io/introduction.html">Intro.</a>
          <a class="nav-link" href="https://felipecarreola.github.io/hobbies.html">Hobbies</a>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn active">Portfolio</button>
            <div id="myDropdown" class="dropdown-content">
              <a class="nav-link" href="https://felipecarreola.github.io/portfolio.html">Portfolio</a>

              <ul class="dropdown-list">
                <li><a class="nav-link active" href="https://felipecarreola.github.io/zagster-client/">Zagster<br>Client</a></li>
              </ul>

            </div>
          </div>

        </nav>
      </div>
    </header>


    <section class="box-transp-zagster">
      <main role="main" class="inner cover">

        <h1 class="cover-heading">Zagster Bike Share in Bend</h1>
        <br>

        <div>
          <canvas id="myChart" width="490" height="490"></canvas>
        </div>

      </main>
    </section>


    <footer class="mastfoot mt-auto">
      <div class="box-transp-footer">
        <div class="inner">
          <p> Felipe Carreño Arreola || OSU Cascades Email: <a href="mailto:arreolaf@oregonstate.edu">arreolaf@oregonstate.edu</a> <br>
            <a href="https://github.com/FelipeCArreola" target="_blank"><img src="https://i.imgur.com/1xG32b2.png"></a> <a href="https://github.com/FelipeCArreola" target="_blank">GitHub</a> ||
            <a href="https://stackoverflow.com/users/10423421/felipe-c-arreola?tab=profile" target="_blank"><img src="https://i.imgur.com/wO2A0jC.png"></a> <a href="https://stackoverflow.com/users/10423421/felipe-c-arreola?tab=profile" target="_blank">Stack Overflow</a> ||
            <a href="Files/Felipe Carreño Arreola_resume_Final.pdf" target="_blank"><img src="https://i.imgur.com/rF2UoAi.png"></a> <a href="Files/Felipe Carreño Arreola_resume_Final.pdf" target="_blank">Resume</a></p>
        </div>
      </div>
    </footer>

  </div>


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
  <script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>


</body>

</html>

1 个答案:

答案 0 :(得分：-1)

尝试一下。我相信您对异步代码并推送到ChartData数组会导致事情无法正常工作是正确的。

const BASE_URL = "https://zagster-service.herokuapp.com"


const G5_TC = "/rides/count/g5"
const COL_TC = "/rides/count/columbia_simpson"
const DRAKE_TC = "/rides/count/drake_park"
const GALV_TC = "/rides/count/galveston"
const GRC_TC = "/rides/count/grc"
const OLD_TC = "/rides/count/old_mill"
const OSU_TC = "/rides/count/osu_cascades"
const TEN_TC = "/rides/count/ten_barrel"

var ChartData = [];


$(updateView)

function updateView() {

   $.when([
        ($.getJSON(BASE_URL + G5_TC, updateChartData)), 
            
        ($.getJSON(BASE_URL + COL_TC, updateChartData)), 
            
        ($.getJSON(BASE_URL + DRAKE_TC, updateChartData)),
         
        ($.getJSON(BASE_URL + GALV_TC, updateChartData)),
                    
        ($.getJSON(BASE_URL + GRC_TC, updateChartData)),
    
        ($.getJSON(BASE_URL + OLD_TC, updateChartData)),
               
        ($.getJSON(BASE_URL + OSU_TC, updateChartData)),
           
        ($.getJSON(BASE_URL + TEN_TC, updateChartData))
        
   ]).then(displayGraph);

}

function updateChartData(data) {
    console.log(data);
    return data
}

然后更改displayGraph的定义以接受一个参数（这将是“ when（）”调用中的调用返回的结果。也要摆脱全局ChartData。无论何时引用ChartData，都应引用此新的chartData希望有帮助！ 编辑：查看when（）：https://api.jquery.com/jquery.when/的文档，似乎您可能需要做更多类似的事情，然后像使用ChartData一样使用allChartData。

 function displayGraph(chartData1, chartData2, chartData3, chartData4, chartData6, chartData7, chartData8) {
let allChartData = [chartData1, chartData2, chartData3, chartData4, chartData5, chartData6, chartData7, chartData8]
相关问题
最新问题