Thêm biểu đồ đường Chart.js vào trang Jinja2/Flask từ tệp js

Question

Tôi có đoạn mã sau trong tệp html Bootstrap đơn giản hiển thị biểu đồ đường Chart.js.

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

Các tập tin js chứa thiết lập của bảng xếp hạng như sau:

$(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); 
}); 

Tôi muốn tránh sử dụng một tập tin javascript riêng biệt và khá chỉ có tất cả mọi thứ trong trang html Jinja2/Flask tôi. Một ví dụ làm việc có thể được tìm thấy trong this tutorial, đây là cùng một cách mà tôi muốn làm theo. Tôi đã cố gắng để sao chép bất kỳ dán phần js vào trang html của tôi và đặt giữa <script> thẻ, nhưng tiếc là nó không hoạt động.

Sau đây là cách tôi đã cố gắng:

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

Đáng tiếc là tôi không quá quen thuộc với JS và không có nhiều ý tưởng về những gì tôi nên làm gì để hiển thị biểu đồ trong ứng dụng Flask tôi. Tôi thực sự sẽ đánh giá cao nếu ai đó có thể cho tôi thấy những sửa đổi cần thiết mà tôi cần thực hiện để làm cho nó hoạt động.

Answer 1

Trước tiên hãy đảm bảo JS được yêu cầu được tham chiếu trong mẫu của bạn (hoặc mẫu mở rộng).

Giả sử bạn phục vụ nó từ static/js thư mục:

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

nội dung thẻ script của bạn trông chủ yếu là tốt, chỉ là một chút thay đổi nhận bối cảnh, và bạn dường như có một trailing }); mà bạn cần phải loại bỏ:

<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

Như bgse đã nói trong câu trả lời của mình, trước tiên bạn cần phải tải thư viện. Tôi đề nghị bạn sử dụng CDN như vậy bạn không cần phải tải xuống thư viện ChartJS.

Thứ hai, bạn đang viết một số JS có thể được thực hiện trước khi thư viện được tìm nạp vào trang. Vì vậy, tôi sẽ thêm gì:

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

Mã tập lệnh này sẽ thực thi khi tất cả JS được tải.