![](/img/trans.png)
[英]Understanding the error “SyntaxError: expected expression, got '<'”
[英]Jinja throughs “SyntaxError: expected property name, got '%' ” error
我將Flask框架與render_template一起使用。 Flask返回列表到if.html文件。 我在if.html文件中使用Chart.js從燒瓶返回的列表中創建圖形。 當我使用HTML里面的chart.js之代碼文件,它工作正常,但是當我想同樣的JavaScript代碼復制到外部line.js文件,並鏈接回我的whether.html然后我看到語法錯誤:預期的屬性名稱,在控制台中出現“%” JavaScript錯誤。
對於這個問題,我將不勝感激。
在if.html中的JavaScript
{% extends "index.html" %}
{% block content %}
<!-- bar chart canvas element -->
<canvas id="myChart" width="600" height="400"></canvas>
<p id="pointSelected">Point selected:</p>
<script>
// Global parameters:
// do not resize the chart canvas when its container does (keep at 600x400px)
Chart.defaults.global.responsive = false;
// define the chart data
var chartData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [{
label: '{{ legend }}',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : [{% for item in values %}
{{item}},
{% endfor %}],
spanGaps: false
},
{
label: 'Sensor 2',
fill: false,
lineTension: 0.1,
borderColor: "#3e95cd",
data : [{% for item in values %}
{{item + 3}},
{% endfor %}],
}
]
}
// get chart canvas
var holder = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' degrees';
}
}
},
}
});
// get the text element below the chart
var pointSelected = document.getElementById("pointSelected");
// create a callback function for updating the selected index on the chart
holder.onclick = function(evt){
var activePoint = myChart.getElementAtEvent(evt);
console.log(activePoint);
console.log('x:' + activePoint[0]._view.x);
console.log('maxWidth: ' + activePoint[0]._xScale.maxWidth);
console.log('y: ' + activePoint[0]._view.y);
console.log('index: ' + activePoint[0]._index);
pointSelected.innerHTML = 'Point selected... index: ' + activePoint[0]._index;
};
</script>
{% endblock %}
line.js文件
// Global parameters:
// do not resize the chart canvas when its container does (keep at 600x400px)
Chart.defaults.global.responsive = false;
// define the chart data
var chartData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [{
label: '{{ legend }}',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : [{% for item in values %}
{{item}},
{% endfor %}],
spanGaps: false
},
{
label: 'Sensor 2',
fill: false,
lineTension: 0.1,
borderColor: "#3e95cd",
data : [{% for item in values %}
{{item + 3}},
{% endfor %}],
}
]
}
// get chart canvas
var holder = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' degrees';
}
}
},
}
});
// get the text element below the chart
var pointSelected = document.getElementById("pointSelected");
// create a callback function for updating the selected index on the chart
holder.onclick = function(evt){
var activePoint = myChart.getElementAtEvent(evt);
console.log(activePoint);
console.log('x:' + activePoint[0]._view.x);
console.log('maxWidth: ' + activePoint[0]._xScale.maxWidth);
console.log('y: ' + activePoint[0]._view.y);
console.log('index: ' + activePoint[0]._index);
pointSelected.innerHTML = 'Point selected... index: ' + activePoint[0]._index;
};
if.html文件
{% extends "index.html" %}
{% block content %}
<!-- <script src='static/Chart.min.js'></script> -->
<script src='static/js/Chart.js'></script>
<script src='static/js/line.js'></script>
<!-- <canvas id="line-chart" width="300" height="150"></canvas> -->
<h1>Temperature Sensor #1</h1>
<!-- bar chart canvas element -->
<canvas id="myChart" width="600" height="400"></canvas>
<p id="pointSelected">Point selected:</p>
{% endblock %}
Jinja僅適用於html文件,您不能在其他文件中使用它的標簽。 但是,您可以簡單地用變量來渲染小腳本,該變量在html模板中包含所需的值,然后在外部腳本中使用它們,例如:
{% extends "index.html" %}
{% block content %}
<!-- bar chart canvas element -->
<canvas id="myChart" width="600" height="400"></canvas>
<p id="pointSelected">Point selected:</p>
<script>
var labels = [{% for item in labels %}
"{{item}}",
{% endfor %}]
var data = [{% for item in values %}
{{item}},
{% endfor %}]
// and so on for each variable
// it's important to import external script
// after variables declaration, not before
</script>
<script src="external-script.js"></script>
{% endblock %}
然后您可以簡單地在外部腳本中使用它們,例如:
var chartData = {
labels : labels,
// and so on
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.