Chart.jsのグラフを表示できない

MonacaのOnsen UI V2 JS Navigationと
Chart.jsを用いてPage2に円グラフを表示したいのですが
その方法がわかりません。
以下が今入力しているコードです。
できればサンプルを載せていただけるとありがたいです。

追記　教えていただいたことを参考にコードを再入力しましたが
変わらずグラフは表示されないままです...。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
  
  <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#push-button').onclick = function() {
          document.querySelector('#navigator').pushPage('page2.html');
        };

     

      }
    });
  </script>
</head>

<body>
  <ons-navigator id="navigator" page="page1.html"></ons-navigator>

  <ons-template id="page1.html">
    <ons-page id="first-page">
      <ons-toolbar>
        <div class = "center">
          page1
        </div>
        </ons-toolbar>
        
        <div class="content">
          <div class="center">
            <span>
              <br>
              <br>
              <div>
                <input id="text" class="text-input text-input--material" placeholder="1" type="text" required>
                <select name="example" id = "select">
                    <option value="サンプル1">５時</option>
                    <option value="サンプル2">５時半</option>
                    <option value="サンプル3">６時</option>
                    <option value="サンプル4">６時半</option>
                    <option value="サンプル5">７時</option>
                    <option value="サンプル6">７時半</option>
                    <option value="サンプル7">８時</option>
                    <option value="サンプル8">８時半</option>
                    <option value="サンプル9">９時</option>
                    <option value="サンプル10">９時半</option>
                    <option value="サンプル11">１０時</option>
                    <option value="サンプル12">１０時半</option>
                    <option value="サンプル13">１１時</option>
                    <option value="サンプル14">１１時半</option>
                  </select></div>
              
              <br />
              <div>
                <input id="aaa" class="text-input text-input--material" placeholder="2" type="password" required>
                <select name="example" id = "select">
                  <option value="サンプル1">５時</option>
                  <option value="サンプル2">５時半</option>
                  <option value="サンプル3">６時</option>
                  <option value="サンプル4">６時半</option>
                  <option value="サンプル5">７時</option>
                  <option value="サンプル6">７時半</option>
                  <option value="サンプル7">８時</option>
                  <option value="サンプル8">８時半</option>
                  <option value="サンプル9">９時</option>
                  <option value="サンプル10">９時半</option>
                  <option value="サンプル11">１０時</option>
                  <option value="サンプル12">１０時半</option>
                  <option value="サンプル13">１１時</option>
                  <option value="サンプル14">１１時半</option>
                </select></div>
              <br>
              <div>
                <input id="bbb" class="text-input text-input--material" placeholder="3" type="etc" required>
                <select name="example" id = "select">
                  <option value="サンプル1">５時</option>
                  <option value="サンプル2">５時半</option>
                  <option value="サンプル3">６時</option>
                  <option value="サンプル4">６時半</option>
                  <option value="サンプル5">７時</option>
                  <option value="サンプル6">７時半</option>
                  <option value="サンプル7">８時</option>
                  <option value="サンプル8">８時半</option>
                  <option value="サンプル9">９時</option>
                  <option value="サンプル10">９時半</option>
                  <option value="サンプル11">１０時</option>
                  <option value="サンプル12">１０時半</option>
                  <option value="サンプル13">１１時</option>
                  <option value="サンプル14">１１時半</option>
                </select> </div>
            </span>


           
     <div class = "push-button"> 
            <ons-button id="push-button">作成<i class="far fa-hand-point-right"></i></ons-button>
          </div>
          </ons-page>
          </ons-template>

<!-- Page2 -->
  <ons-template id="page2.html">
    <ons-page id="second-page">


   
      <ons-toolbar>
        <div class="left"><ons-back-button></ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

    
      <p><a href="https://twitter.com/"><i class = "fab fa-twitter fa-fw"></i></a>
        <a href="https://www.instagram.com/?hl=ja"><i class="fab fa-instagram fa-fw"></i></a>
        </p>




        
          <div class="container">
            <h2>Chart.js — Pie Chart Demo (apples)</h2>
            <div>
              <canvas id="myChart"></canvas>
              <script src="app.js"></script>
          </div>
          </div>

    
    </ons-page>
 

  
</body>
</html>

var
1var myChart = new Chart(ctx, {
2  type: 'pie',
3  data: {
4    labels: ["M", "T", "W", "T", "F", "S", "S"],
5    datasets: [{
6      backgroundColor: [
7        "#2ecc71",
8        "#3498db",
9        "#95a5a6",
10        "#9b59b6",
11        "#f1c40f",
12        "#e74c3c",
13        "#34495e"
14      ],
15      data: [12, 19, 3, 17, 28, 24, 7]
16    }]
17  }
18});

kszk311

2018/02/09 06:05

HTML側のソースも載せてください

行動規範の内容に同意します

回答2件

もしかして…

「ctx」定義されていますか？
それがないと、どの要素に描画するかが何も指定されていないので

javascript
1var ctx = document.getElementById('myChart').getContext('2d');
2
3var myChart = new Chart(ctx, {
4  type: 'pie',
5    ~~~
6

コードを修正したのであれば、修正後のコードも載せて頂ければと

投稿2018/02/17 11:12

kszk311

総合スコア3404

Javascriptに問題がありません。
HTML側のソースはどうなりますか？

修正 : app.jsは<canvas></canvas>の後移動してください。

試した : http://study.jeromedupuis.net/teratail/112739/

<canvas id="myChart"></canvas>

<script src="node_modules/chart.js/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d')
var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                        backgroundColor: [
                                "#2ecc71", 
                                "#3498db", 
                                "#95a5a6", 
                                "#9b59b6", 
                                "#f1c40f", 
                                "#e74c3c", 
                                "#34495e"
                        ],
                        data: [12, 19, 3, 17, 28, 24, 7]
                }]
        }
})
</script>

投稿2018/02/09 06:42

編集2018/02/09 06:45