jsファイルからJinja2/Flask htmlページにChart.js折れ線グラフを追加する

Question

Chart.js折れ線グラフを表示するシンプルなBootstrap htmlファイルに次のコードがあります。

<div class="card-block chartjs"> 
     <canvas id="line-chart" height="500"></canvas> 
    </div> 

チャートのセットアップが含まれているのjsファイルは、次のようになります。

$(window).on("load", function(){ 

    var ctx = $("#line-chart"); 

    var chartOptions = { 
     responsive: true, 
     maintainAspectRatio: false, 
     legend: { 
      position: 'bottom', 
     }, 
     hover: { 
      mode: 'label' 
     }, 
     scales: { 
      xAxes: [{ 
       display: true, 
       gridLines: { 
        color: "#f3f3f3", 
        drawTicks: false, 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Month' 
       } 
      }], 
      yAxes: [{ 
       display: true, 
       gridLines: { 
        color: "#f3f3f3", 
        drawTicks: false, 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Value' 
       } 
      }] 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Line Chart - Legend' 
     } 
    }; 

    var chartData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "My First dataset", 
      data: [65, 59, 80, 81, 56, 55, 40], 
      fill: false, 
      borderDash: [5, 5], 
      borderColor: "#9C27B0", 
      pointBorderColor: "#9C27B0", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }, { 
      label: "My Second dataset", 
      data: [28, 48, 40, 19, 86, 27, 90], 
      fill: false, 
      borderDash: [5, 5], 
      borderColor: "#00A5A8", 
      pointBorderColor: "#00A5A8", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }, { 
      label: "My Third dataset - No bezier", 
      data: [45, 25, 16, 36, 67, 18, 76], 
      lineTension: 0, 
      fill: false, 
      borderColor: "#FF7D4D", 
      pointBorderColor: "#FF7D4D", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }] 
    }; 

    var config = { 
     type: 'line', 

     options : chartOptions, 

     data : chartData 
    }; 

    var lineChart = new Chart(ctx, config); 
}); 

私はちょうど私のJinja2の/フラスコhtmlページ内のすべてを持っているというのJavaScriptファイルに分離してを使用しないようにしたいと思います。実際の例はthis tutorialにありますが、これは私が従いたいのと同じ方法です。 jsの部分をhtmlページにコピーして<script>タグの間に入れようとしましたが、残念ながらそれは動作しません。ここで

は、私が試した方法です：

# in my jinja2/flask html page 
<div class="card-body collapse in"> 
    <div class="card-block chartjs"> 
     <canvas id="line-chart" height="500"></canvas> 
    </div> 
</div> 
<script> 
    var ctx = $("#line-chart"); 
    var chartOptions = { 
     responsive: true, 
     maintainAspectRatio: false, 
     legend: { 
      position: 'bottom', 
     }, 
     hover: { 
      mode: 'label' 
     }, 
     scales: { 
      xAxes: [{ 
       display: true, 
       gridLines: { 
        color: "#f3f3f3", 
        drawTicks: false, 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Month' 
       } 
      }], 
      yAxes: [{ 
       display: true, 
       gridLines: { 
        color: "#f3f3f3", 
        drawTicks: false, 
       }, 
       scaleLabel: { 
        display: true, 
        labelString: 'Value' 
       } 
      }] 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Line Chart - Legend' 
     } 
    }; 

    // Chart Data 
    var chartData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "My First dataset", 
      data: [65, 59, 80, 81, 56, 55, 40], 
      fill: false, 
      borderDash: [5, 5], 
      borderColor: "#9C27B0", 
      pointBorderColor: "#9C27B0", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }, { 
      label: "My Second dataset", 
      data: [28, 48, 40, 19, 86, 27, 90], 
      fill: false, 
      borderDash: [5, 5], 
      borderColor: "#00A5A8", 
      pointBorderColor: "#00A5A8", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }, { 
      label: "My Third dataset - No bezier", 
      data: [45, 25, 16, 36, 67, 18, 76], 
      lineTension: 0, 
      fill: false, 
      borderColor: "#FF7D4D", 
      pointBorderColor: "#FF7D4D", 
      pointBackgroundColor: "#FFF", 
      pointBorderWidth: 2, 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
     }] 
    }; 

    var config = { 
     type: 'line', 

     // Chart Options 
     options : chartOptions, 

     data : chartData 
    }; 

    // Create the chart 
    var lineChart = new Chart(ctx, config); 
}); 
</script> 

残念ながら、私はJSとそれほど慣れていないと私は私のフラスコアプリでグラフを表示するために何をすべきかについてのより多くのアイデアを持っていません。誰かが必要な変更を私に提示して、それを動作させるために実装する必要があるのであれば、本当に感謝します。

Answer 1

最初に、必要なJSがテンプレート（またはテンプレートが拡張するテンプレート）で参照されていることを確認します。

あなたはstatic/jsフォルダからそれを提供すると仮定：

<head> 
    ... 
    <script src='/static/js/Chart.bundle.min.js'></script> 
    ... 
</head> 

あなたのスクリプトタグの内容は、コンテキストを取得ほんの少しの修正をほとんど正常に見える、とあなたが削除する必要があり、末尾});を持っているように見えます：

<script> 
    // get context 
    var ctx = document.getElementById("line-chart").getContext("2d"); 

    .... 

    // Create the chart 
    var lineChart = new Chart(ctx, config); 

    // REMOVE THIS FROM THE END OF YOUR SCRIPT 
    //}); 
</script> 

Answer 2

bgseが答えたところで、まずライブラリをロードする必要があります。 ChartJSライブラリをダウンロードする必要がないように、CDNを使用することをお勧めします。

第2に、ライブラリがページにフェッチされる前に実行される可能性のあるJSを書きます。だから私は何を追加するでしょう：

<div class="card-body collapse in"> 
    <div class="card-block chartjs"> 
     <canvas id="line-chart" height="500"></canvas> 
    </div> 
</div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script> 
    $(document).ready(function(){ 
     // Your JS code here 
     // ... 
    }); 
</script> 

この方法では、すべてのJSが読み込まれるとスクリプトコードが実行されます。