60726


Javascript でfunction関数でチャートを定義し、複数チャートを記載しました。  
チャート以外の関数は、複数記載しても動作しますが、添付のチャート関数は、複数記載しても複数の動作が確認できませんでした。  
理由に関して、ご指導頂けませんでしょうか。

index.html_case16

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="Shit_jis">
      <title>chart of results</title>
    </head>
    <body>
    <!--ここにグラフが挿入されます-->
    
    </br>
    
    <div style="width: 50%; height: 50%;">
    <canvas id="myLineChart" style="width: 50%; height: auto;"></canvas>
    </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    
      <script>
        function test_case(){
          var ctx = document.getElementById("myLineChart");
          var myLineChart = new Chart(ctx, {
            type: 'line',
            data: {
              labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
              datasets: [
                {
                  label: '最高気温(度）',
                  data: [35, 34, 37, 35, 34, 35, 34, 25],
                  borderColor: "rgba(255,0,0,1)",
                  backgroundColor: "rgba(0,0,0,0)"
                },
                {
                  label: '最低気温(度）',
                  data: [25, 27, 27, 25, 26, 27, 25, 21],
                  borderColor: "rgba(0,0,255,1)",
                  backgroundColor: "rgba(0,0,0,0)"
                }
              ],
            },
            options: {
              title: {
                display: true,
                text: '気温（8月1日~8月7日）'
              },
              scales: {
                yAxes: [{
                  ticks: {
                    suggestedMax: 40,
                    suggestedMin: 0,
                    stepSize: 10,
                    callback: function(value, index, values){
                      return  value +  '度'
                    }
                  }
                }]
              },
            }
          });
        }
        test_case();
      </script>
      </br>
      </br>
    
      <script>
        test_case();
      </script>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-11-21T04:30:58.553
60720
2019-11-21T06:50:10.623
2019-11-21T06:46:43.200
19110
31870
question
javascript chart.js
Javascriptの関数が2度以上実行できない


関数呼び出し `test_case()` は2回実行されています。「関数が2回呼び出されたこと」をどのように確認していますか？
もし「グラフが2つ描画されない」ことから疑っているのであれば、それは間違いです。たとえば `test_case` の関数定義の中に
`console.log` を仕込めば、2回出力されていることが分かります。

グラフが2つ描画されないのは、どちらの呼び出しでも id が `myLineChart` の canvas に描画しているからです。


CC BY-SA 4.0
2019-11-21T06:50:10.623
60726
2019-11-21T06:50:10.623
19110
60720
answer