在 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>