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