codeigniterのchart.jsを使用してグラフを追加する

Question

私のビュー（Codeigniter）に簡単なグラフを表示しようとしていますが、表示されません。誰かが私に何が欠けているか教えてくれますか？これであなたの助けを感謝します。

<div class="container"> 
    <h2>This is a sample — Line Chart</h2> 
    <div> 
     <canvas id="myChart"></canvas> 
    </div> 
</div> 

<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"> 
var ctx = document.getElementById("myChart").getContext("2d"); 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3] 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 
</script> 

Answer 1

ためのスクリプトタグが欠落しています。私はスクリプトタグのソースを変更するだけです。 下記の更新されたコードをご覧ください。

<div class="container"> 
    <h2>This is a sample — Line Chart</h2> 
    <div> 
     <canvas id="myChart"></canvas> 
    </div> 
</div> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> 
    var ctx = document.getElementById("myChart").getContext("2d"); 

    var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
        datasets: [{ 
         label: '# of Votes', 
         data: [12, 19, 3, 5, 2, 3] 
          }] 
        }, 
      options: { 
      scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
           } 
          }] 
        } 
      } 
     }); 
    </script> 

Answer 2

あなたは、私は私の問題を修正し、あなたのJSコード

<script> 
var ctx = document.getElementById("myChart").getContext("2d"); 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3] 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 
</script>