ChartJSがドロップダウン選択に基づいて表示データを変更する

Question

ChartJSを使用して、選択したチームまたは人に基づいて比較データを表示する折れ線グラフを表示するプロジェクトに取り組んでいます。ここで

はHTMLです：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 

<div class="compare-team-summary-container"> 

    <div id="compare-team-sales"> 

    <div class="title-selection-container"> 
     <div class="compare-main-title"> 
     COMPARE TEAM SALES 
     <br> 
     <span>1/1 - 1/7</span> 
     </div> 
     <div class="team-selection-container"> 
     <select class="team-one"> 
      <option value="Sample One">Sample One</option> 
      <option value="Person Two">Person Two</option> 
      <option value="Individual Three">Individual Three</option> 
      <option value="Option Four">Option Four</option> 
     </select> 
     <select class="team-two"> 
      <option value="Sample 1A">Sample 1A</option> 
      <option value="Option Two">Option Two</option> 
      <option value="Person Three">Person Three</option> 
      <option value="Individual Four">Individual Four</option> 
     </select> 
     </div> 
     <div class="clear"></div> 
    </div> 

    <div class="sales-team-graphs"> 
     <canvas id="myChart"></canvas> 
    </div> 
    </div> 

</div> 

CSS ..

html, 
body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    background: #f2f2f2; 
    color: #ffffff; 
    font-size: 16px; 
    line-height: 28px; 
    font-family: 'Lato', 'Oswald', 'Open Sans', sans-serif; 
} 

.clear { 
    clear: both; 
} 

.compare-team-summary-container { 
    color: #797979; 
    text-align: center; 
    margin: 10px 20px 50px 20px; 
} 

.compare-team-summary-container #compare-team-sales { 
    background: #ffffff; 
    padding: 15px 20px; 
    border-radius: 4px; 
    margin: 5px 10px 10px; 
    text-align: left; 
    width: 700px; 
    height: 400px; 
    display: inline-block; 
    vertical-align: top; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container { 
    margin-bottom: 30px; 
    padding-bottom: 16px; 
    border-bottom: 1px #dedede solid; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .compare-main-title { 
    font-weight: bold; 
    line-height: 24px; 
    float: left; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .compare-main-title span { 
    font-size: 14px; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container { 
    float: right; 
    margin-top: 10px; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-one { 
    background: transparent; 
    border: 0; 
    border-radius: 3px; 
    width: 220px; 
    height: 36px; 
    padding: 0 10px; 
    margin-top: -3px; 
    font-size: 13px; 
    color: #ffffff; 
    margin-right: 14px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: url(../images/icons/down-chevron-white.png) 96%/6% no-repeat #5da7e4; 
    cursor: pointer; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-one option { 
    background: transparent; 
    border: 0; 
    border-radius: 3px; 
    width: 220px; 
    height: 36px; 
    padding: 0 10px; 
    margin-top: -3px; 
    font-size: 13px; 
    color: #ffffff; 
    margin-right: 14px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: #5da7e4; 
    cursor: pointer; 
} 

.compare-team-summary-container #compare-team-sales .title-selection-container .team-selection-container .team-two { 
    background: transparent; 
    border: 0; 
    border-radius: 3px; 
    width: 220px; 
    height: 36px; 
    padding: 0 10px; 
    margin-top: -3px; 
    font-size: 13px; 
    color: #ffffff; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: url(../images/icons/down-chevron-white.png) 96%/6% no-repeat #303e7b; 
    cursor: pointer; 
} 

.compare-team-summary-container #compare-team-sales .sales-team-graphs { 
    height: 350px; 
    margin-top: -99px; 
} 

とJavaScript ...。ここ

Chart.defaults.global.legend.display = false; 
Chart.defaults.global.tooltips.enabled = false; 

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

Chart.defaults.global.responsive = true; 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], 
    datasets: [{ 
     lineTension: 0, 
     label: 'sample one', 
     data: [50403, 28403, 30309, 60987, 34876, 22987, 10890, 46734], 
     backgroundColor: "rgba(125, 209, 255, 0.77)" 

    }, { 
     lineTension: 0, 
     label: 'sample 1a', 
     data: [32403, 42403, 66403, 28906, 44878, 37890, 12978, 39865], 
     backgroundColor: "rgba(48, 62, 123, 1)" 
    }] 
    }, 
    options: { 
    responsive: true, 
    maintainAspectRatio: false, 
    scales: { 
     yAxes: [{ 
     gridLines: { 
      display: false 
     }, 
     ticks: { 
      display: false, 
      min: 0, 
      max: 110000, 
      fixedStepSize: 10000 
     } 
     }], 
     xAxes: [{ 
     ticks: { 
      display: false 
     } 
     }], 
    }, 
    elements: { 
     point: { 
     radius: 0 
     } 
    }, 
    scaleShowLabels: false, 
    } 
}); 

はフィドルです： https://jsfiddle.net/antondaniels/c34uo667/3/

比較のために2つのグラフを同じ色で表示するしか方法が分かりません。その情報を切り替えるためにドロップダウンセレクタを結びます。

ご協力いただければ幸いです！

Answer 1

それぞれの選択肢に適切なデータをロードし、既存のデータをデータセットから削除し、新しいデータをデータセットにプッシュする「変更」イベントを試行します。

 $('.team-one').change(function() { 
      var sel = $(this).val(); 
      var newData = []; 
      switch(sel) { 
      case 'Person Two': 
       newData = ['insert data for Person Two']; 
       myChart.datasets[0].data.length = 0; 
       myChart.datasets[0].data.push.apply(
       myChart.datasets[0].data, newData); 
       break; 
      case 'Individual Three': 
//structure as above with data for Individual Three 
       break; 
      case 'Person Four': 
//structure as above with data for Person Four 
       break; 
      default: 
//structure as above with data for Sample One 
      } 
      myChart.update(); 
     });