1. 首頁
  2. 問答
  3. 試圖讓多個chart.js圖表​​加載在同一頁面

試圖讓多個chart.js圖表​​加載在同一頁面

2017-09-27 160 views
0

由於某種原因，我無法弄清楚如何讓多個chart.js圖表​​加載到同一頁面上。我可以得到一個加載得很好，但是當我添加更多時，他們都沒有加載。任何想法，我做錯了什麼？試圖讓多個chart.js圖表​​加載在同一頁面

<div class="game-cards col-lg-5"> 
     <div class="chart-container"> 
      <canvas id="myChart" width="500" height="500"></canvas> 
     </div> 

     <div class="right-info"> 
      <h4>Iowa State vs Iowa</h4> 
      <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
      <div class="total-points-live"> 
       <h5>Total Points Bet</h5> 
       <h5 id="point-total">20,000</h5> 
       <p class="bet-button">Click To Place Bet</p> 
      </div> 
     </div> 
     <div> 
      <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
     </div> 
    </div> 
    <div class="game-cards col-lg-5"> 
     <div class="chart-container"> 
      <canvas id="myChart" width="500" height="500"></canvas> 
     </div> 

     <div class="right-info"> 
      <h4>Iowa State vs Iowa</h4> 
      <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
      <div class="total-points-live"> 
       <h5>Total Points Bet</h5> 
       <h5 id="point-total">20,000</h5> 
       <p class="bet-button">Click To Place Bet</p> 
      </div> 
     </div> 
     <div> 
      <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
     </div> 
    </div>

這是JavaScript

window.onload = function() { 
     var ctx = document.getElementById("myChart").getContext('2d'); 

     var myChart = new Chart(ctx, { 
      type: 'doughnut', 
      data: { 
      labels: ["Iowa", "Iowa State"], 
      datasets: [{ 
       backgroundColor: [ 
       "#CC0000", 
       "#F1BE48", 
       ], 
       data: [2000, 9000] 
      }] 
      }, 
      options: { 
       responsive: true 
      , maintainAspectRatio: false 
      } 
     }); 
    }

來源

2017-09-27 Branduo

回答

1

你需要交換機ID與類或使獨特的IDS

也許使用id="myChart"爲先，和id="myChart2"爲第二，但你需要創建另一個函數來定位第二個圖表。

你可以用類切換ID並通過Javascript將它們定位，如果兩個圖表共享相同的選項。

var ctx = document.getElementsByClassName("myChart").getContext('2d');

來源

2017-09-27 02:08:35 Deano

+0

是的，謝謝！出於某種原因，我的大腦昨晚不工作，謝謝你的簡單答案。 – Branduo

+0

不用擔心，樂意幫忙:) – Deano

1

不要對多個元素使用相同的ID。 ID必須是唯一！

在你的榜樣，將其更改爲不同的ID - 也許firstChart和secondChart：

window.onload = function() { 
 
    var ctx = document.getElementById("firstChart").getContext('2d'); 
 

 
    var firstChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Iowa", "Iowa State"], 
 
     datasets: [{ 
 
     backgroundColor: [ 
 
      "#CC0000", 
 
      "#F1BE48", 
 
     ], 
 
     data: [2000, 9000] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: true, 
 
     maintainAspectRatio: false 
 
    } 
 
    }); 
 

 
    var ctx2 = document.getElementById("secondChart").getContext('2d'); 
 

 
    var secondChart = new Chart(ctx2, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Iowa", "Iowa State"], 
 
     datasets: [{ 
 
     backgroundColor: [ 
 
      "#CC0000", 
 
      "#F1BE48", 
 
     ], 
 
     data: [2000, 9000] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: true, 
 
     maintainAspectRatio: false 
 
    } 
 
    }); 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
 
<div class="game-cards col-lg-5"> 
 
    <div class="chart-container"> 
 
    <canvas id="firstChart" width="500" height="500"></canvas> 
 
    </div> 
 

 
    <div class="right-info"> 
 
    <h4>Iowa State vs Iowa</h4> 
 
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
 
    <div class="total-points-live"> 
 
     <h5>Total Points Bet</h5> 
 
     <h5 id="point-total">20,000</h5> 
 
     <p class="bet-button">Click To Place Bet</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
 
    </div> 
 
</div> 
 
<div class="game-cards col-lg-5"> 
 
    <div class="chart-container"> 
 
    <canvas id="secondChart" width="500" height="500"></canvas> 
 
    </div> 
 

 
    <div class="right-info"> 
 
    <h4>Iowa State vs Iowa</h4> 
 
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
 
    <div class="total-points-live"> 
 
     <h5>Total Points Bet</h5> 
 
     <h5 id="point-total">20,000</h5> 
 
     <p class="bet-button">Click To Place Bet</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
 
    </div> 
 
</div>

或者 - 如果你是因爲你不併不需要每個圖表參考想以後更改他們 - 使用相同的類的所有圖表：

window.onload = function() { 
 
    var charts = document.getElementsByClassName("piechart"); 
 

 
    for (chart of charts) { 
 
    var ctx = chart.getContext('2d'); 
 

 
    new Chart(ctx, { 
 
     type: 'doughnut', 
 
     data: { 
 
     labels: ["Iowa", "Iowa State"], 
 
     datasets: [{ 
 
      backgroundColor: [ 
 
      "#CC0000", 
 
      "#F1BE48", 
 
      ], 
 
      data: [2000, 9000] 
 
     }] 
 
     }, 
 
     options: { 
 
     responsive: true, 
 
     maintainAspectRatio: false 
 
     } 
 
    }); 
 
    } 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
 
<div class="game-cards col-lg-5"> 
 
    <div class="chart-container"> 
 
    <canvas id="firstChart" class="piechart" width="500" height="500"></canvas> 
 
    </div> 
 

 
    <div class="right-info"> 
 
    <h4>Iowa State vs Iowa</h4> 
 
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
 
    <div class="total-points-live"> 
 
     <h5>Total Points Bet</h5> 
 
     <h5 id="point-total">20,000</h5> 
 
     <p class="bet-button">Click To Place Bet</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
 
    </div> 
 
</div> 
 
<div class="game-cards col-lg-5"> 
 
    <div class="chart-container"> 
 
    <canvas id="secondChart" class="piechart" width="500" height="500"></canvas> 
 
    </div> 
 

 
    <div class="right-info"> 
 
    <h4>Iowa State vs Iowa</h4> 
 
    <h5 id="time-channel">11:00 AM - Channel Goes here</h5> 
 
    <div class="total-points-live"> 
 
     <h5>Total Points Bet</h5> 
 
     <h5 id="point-total">20,000</h5> 
 
     <p class="bet-button">Click To Place Bet</p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <input class="bet-input" type="text" name="betAmount" placeholder="Wager Amount"> 
 
    </div> 
 
</div>

來源

2017-09-27 02:10:40 AVAVT

相關問題

 相關問題