2017-08-09 13 views
7

से Jinja2/Flask html पृष्ठ पर चार्ट.जेएस लाइन चार्ट जोड़ना मेरे पास एक सरल बूटस्ट्रैप HTML फ़ाइल में निम्न कोड है जो चार्ट.जेएस लाइन चार्ट प्रदर्शित करता है।jj फ़ाइल

<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 पृष्ठ में सब कुछ से बचने के लिए चाहते हैं। एक कामकाजी उदाहरण this tutorial में पाया जा सकता है, यह वही तरीका है जिसका मैं पालन करना चाहता हूं। मैंने js भाग को किसी भी पेस्ट को अपने एचटीएमएल पेज पर कॉपी करने की कोशिश की है और <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> 

दुर्भाग्य से मैं जे एस के साथ इतना परिचित नहीं हूँ और क्या मैं अपने बोतल अनुप्रयोग में चार्ट प्रदर्शित करने के लिए क्या करना चाहिए के बारे में और अधिक विचार नहीं है। मैं वास्तव में सराहना करता हूं अगर कोई मुझे आवश्यक संशोधन दिखा सकता है जिसे मुझे इसे काम करने के लिए लागू करने की आवश्यकता है।

+0

कृपया अपने ब्राउज़र डिबगिंग कंसोल से लॉग प्रदान करें (या बताएं कि कोई भी नहीं है)। [फ़ायरफ़ॉक्स के लिए यह आलेख] देखें (https://developer.mozilla.org/en/docs/Tools/Browser_Console) और [यह क्रोम के लिए] [https://developers.google.com/web/tools/chrome- DevTools/कंसोल /)। संपादित करें: क्या आपने सभी आवश्यक स्क्रिप्ट संलग्न की हैं (चार्ट.जेएस, jQuery)? – krassowski

+0

'लेकिन दुर्भाग्य से यह काम नहीं करता है' क्या काम नहीं करता है? क्रोम के विकास कंसोल या किसी और चीज में आप जो भी त्रुटि देखते हैं? –

+0

कृपया पूरा जिन्जा 2 टेम्पलेट प्रदान करें, हमें यह जानने की जरूरत है कि आपने अपनी इच्छित सभी स्क्रिप्ट आयात की हैं या नहीं। –

उत्तर

2

पहले सुनिश्चित करें कि आवश्यक जेएस आपके टेम्पलेट (या टेम्पलेट में विस्तारित) में संदर्भित है।

मान लिया जाये कि आप 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> 
0

जैसा कि बीजीएस ने अपने उत्तर में कहा था कि आपको पहले लाइब्रेरी लोड करने की आवश्यकता है। मेरा सुझाव है कि आप सीडीएन का उपयोग करें, इस तरह आपको चार्टजेएस लाइब्रेरी डाउनलोड करने की आवश्यकता नहीं है।

दूसरा, आप कुछ जेएस लिख रहे हैं जो लाइब्रेरी को पृष्ठ पर लाए जाने से पहले निष्पादित किया जा सकता है। तो मैं क्या जोड़ूंगा:

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

इस प्रकार स्क्रिप्ट कोड निष्पादित होगा जब सभी जेएस लोड हो जाएंगे।