Chart.jsは1ページに2つのチャートを描画します。

Question

jsはまったく新しいですが、あるページで2つのチャート（chart.js）をレンダリングする助けを探しています。表示する2番目のグラフを取得します。私は、異なるキャンバスIDを持つスクリプトを別々に作成することによって、各グラフが別々にレンダリングされると考えました。現時点では、「朝」チャートのみがレンダリングされます。ありがとう

<div class="container-profile"> 
     <div class="container-week"> 
      <div class="col s12 m5"> 
       <div class="card-panel teal"> 
        <h1>MORNING</h1> 
       </div> 
      </div> 

      <div style="width:90%;"> 
       <canvas id="morningChart" class="morningChart" width="400" height="400"></canvas> 
      </div> 
     </div> 

     <div class="container-week"> 
      <div class="col s12 m5"> 
       <div class="card-panel teal"> 
        <h1>EVENING</h1> 
       </div> 
      </div> 

      <div style="width:90%;"> 
       <canvas id="eveningChart" class="eveningChart" width="400" height="400"></canvas> 
      </div> 
     </div> 
</div> 

<script type="text/javascript"> 

    Chart.defaults.global.defaultFontColor = '#27AAE1' 
    Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro'; 
    Chart.defaults.global.defaultFontSize = 40; 
    Chart.defaults.global.title.fontStyle = 'lighter'; 
    Chart.defaults.global.title.text = "Weekly brushing morning"; 
    Chart.defaults.global.legend.display = false; 

    const CHART = document.getElementById("morningChart"); 

    var morningChart = new Chart(CHART, { 
     type: 'line', 
     data: { 
      labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"], 
      datasets: [ 
       { 
        label: "Weekly brushing", 
        fill: true, 
        /* lineTension: 0.2, */ 
        backgroundColor: "rgba(39,170,225,0.2)", 
        borderColor: "rgba(39,170,225,100)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(39,170,225,100)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 5, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        data: {{morning_weekly}}, 
        spanGaps: false, 
       } 
      ] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        gridLines: { 
         show: true, 
         color: "rgba(39,170,225,0.2)", 
         zeroLineColor: "rgba(39,170,225,1)" 
        }, 
        scaleLabel: { 
         display: true, 
         fontFamily: "Helvetica", 
         fontColor: "#27AAE1" 
        }, 
       }], 
       yAxes: [{ 
        gridLines: { 
         show: true, 
         color: "rgba(39,170,225,0.2)", 
         zeroLineColor: "rgba(39,170,225,1)" 
        }, 
        ticks: { 
         beginAtZero: true, 
         max: 6, 
         min: 0, 
         stepSize: 0.5 
        }, 
       }] 
      } 
     } 
    }); 
</script> 

<script type="text/javascript"> 

    Chart.defaults.global.defaultFontColor = '#27AAE1' 
    Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro'; 
    Chart.defaults.global.defaultFontSize = 40; 
    Chart.defaults.global.title.fontStyle = 'lighter'; 
    Chart.defaults.global.title.text = "Weekly brushing morning"; 
    Chart.defaults.global.legend.display = false; 

    const CHART = document.getElementById("eveningChart"); 

    var eveningChart = new Chart(CHART, { 
     type: 'line', 
     data: { 
      labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"], 
      datasets: [ 
       { 
        label: "Weekly brushing", 
        fill: true, 
        /* lineTension: 0.2, */ 
        backgroundColor: "rgba(39,170,225,0.2)", 
        borderColor: "rgba(39,170,225,100)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(39,170,225,100)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 5, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        data: {{morning_weekly}}, 
        spanGaps: false, 
       } 
      ] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        gridLines: { 
         show: true, 
         color: "rgba(39,170,225,0.2)", 
         zeroLineColor: "rgba(39,170,225,1)" 
        }, 
        scaleLabel: { 
         display: true, 
         fontFamily: "Helvetica", 
         fontColor: "#27AAE1" 
        }, 
       }], 
       yAxes: [{ 
        gridLines: { 
         show: true, 
         color: "rgba(39,170,225,0.2)", 
         zeroLineColor: "rgba(39,170,225,1)" 
        }, 
        ticks: { 
         beginAtZero: true, 
         max: 6, 
         min: 0, 
         stepSize: 0.5 
        }, 
       }] 
      } 
     } 
    }); 
</script> 

Answer 1

Chart.defaults.globalを2回実行する必要はありません。 const CHARTとconst Chartのように、2つの変数に同じ名前を付けるべきではありません。ここにあなたのコードがあります。 http://codepen.io/anon/pen/QKoOJKいくつかの変更を加えれば正常に動作するようです。