我如何將我的 chart.js 腳本包含到 admin lte

Question

我想使用 adminLTE 創建管理頁面。 我需要使用chart.js 將圖表插入到我的adminlte 頁面中。 但是當我嘗試插入我的代碼時，圖表沒有顯示，只有空白。

然后我需要編輯 adminlte chartjs 腳本，但圖表仍未顯示。

這是我在chartjs上的代碼

 <script>
var myChart1 = document.getElementById('myChart1').getContext('2d');

// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';

var massPopChart = new Chart(myChart1, {
  type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data:{
    labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
    datasets:[{
      label:'Population',
      data:[
        617594,
        181045,
        153060,
        106519,
        105162,
        95072
      ],
      //backgroundColor:'green',
      backgroundColor:[
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)'
      ],
      borderWidth:1,
      borderColor:'#777',
      hoverBorderWidth:3,
      hoverBorderColor:'#000'
    }]
  },
  options:{
    title:{
      display:true,
      text:'Largest Cities In Massachusetts',
      fontSize:25,
      responsive: true
    },
    legend:{
      display:true,
      position:'right',
      labels:{
        fontColor:'#000'
      }
    },
    layout:{
      padding:{
        left:50,
        right:0,
        bottom:0,
        top:0
      }
    },
    tooltips:{
      enabled:true
    }



  }
});

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


var massPopChart = new Chart(myChart2, {
  type:'horizontalBar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
  data:{
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets:[{
      label:'Population',
      data:[
        617594,
        181045,
        153060,
        106519,
        105162,
        95072
      ],
      //backgroundColor:'green',
      backgroundColor:[
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)'
      ],
      borderWidth:1,
      borderColor:'#777',
      hoverBorderWidth:3,
      hoverBorderColor:'#000'
    }]
  },
  options:{
    title:{
      display:true,
      text:'Largest Cities In Massachusetts',
      fontSize:25
    },
    legend:{
      display:true,
      position:'right',
      labels:{
        fontColor:'#000'
      }
    },
    responsive: true,
    tooltips:{
      enabled:true
    }
  }
});
</script>

這是 html 腳本

<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">Area Chart</h3>

        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <div class="box-body">
        <div class="chart">
            <canvas id="myChart1"></canvas>
        </div>
    </div>
</div>

<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">Chart Bar</h3>

        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <div class="box-body">
        <div class="chart">
            <canvas id="myChart2"></canvas>
        </div>
    </div>
</div>

謝謝

Answer 1

你用的是哪個版本的chartjs？ 我已經測試了您的代碼而沒有更改它可以正常工作。 也許你忘記添加js文件了。 請檢查您的 console.log 是否有錯誤。

 var myChart1 = document.getElementById('myChart1').getContext('2d'); // Global Options Chart.defaults.global.defaultFontFamily = 'Lato'; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = '#777'; var massPopChart = new Chart(myChart1, { type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea data:{ labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'], datasets:[{ label:'Population', data:[ 617594, 181045, 153060, 106519, 105162, 95072 ], //backgroundColor:'green', backgroundColor:[ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)', 'rgba(255, 99, 132, 0.6)' ], borderWidth:1, borderColor:'#777', hoverBorderWidth:3, hoverBorderColor:'#000' }] }, options:{ title:{ display:true, text:'Largest Cities In Massachusetts', fontSize:25, responsive: true }, legend:{ display:true, position:'right', labels:{ fontColor:'#000' } }, layout:{ padding:{ left:50, right:0, bottom:0, top:0 } }, tooltips:{ enabled:true } } }); var myChart2 = document.getElementById('myChart2').getContext('2d'); var massPopChart = new Chart(myChart2, { type:'horizontalBar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea data:{ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets:[{ label:'Population', data:[ 617594, 181045, 153060, 106519, 105162, 95072 ], //backgroundColor:'green', backgroundColor:[ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)', 'rgba(255, 99, 132, 0.6)' ], borderWidth:1, borderColor:'#777', hoverBorderWidth:3, hoverBorderColor:'#000' }] }, options:{ title:{ display:true, text:'Largest Cities In Massachusetts', fontSize:25 }, legend:{ display:true, position:'right', labels:{ fontColor:'#000' } }, responsive: true, tooltips:{ enabled:true } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Area Chart</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> <div class="chart"> <canvas id="myChart1"></canvas> </div> </div> </div> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Chart Bar</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> <div class="chart"> <canvas id="myChart2"></canvas> </div> </div> </div>