Fatal编程技术网
  • javascript/
  • 将数据作为json从flask传递到javascript无法从单独的.js文件工作

将数据作为json从flask传递到javascript无法从单独的.js文件工作

javascript json flask

将数据作为json从flask传递到javascript无法从单独的.js文件工作,javascript,json,flask,jinja2,Javascript,Json,Flask,Jinja2,我在templates/index.html`: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> </style> </head> <body> <div id="gr

我在templates/index.html`:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>

    </style>
</head>
<body>
    <div id="graphDiv"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script>

    </script>
</body>
</html>
我不想将javascript内联到index.html中，而是创建了一个名为
static/
的目录，并将
style.css
和
main.js
放在那里，其中包含以下代码：

var graphData = {{ data.chart_data | safe }}

var margin = {top: 30, right: 50, bottom: 30, left: 50};
var svgWidth = 600;
var svgHeight = 270;
var graphWidth = svgWidth - margin.left - margin.right;
var graphHeight = svgHeight - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale().range([0, graphWidth]);
var y = d3.scale.linear().range([graphHeight, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var highLine = d3.svg.line()
    .x(function(d) { return x(d.Date); })
    .y(function(d) { return y(d.High); });

var closeLine = d3.svg.line()
    .x(function(d) { return x(d.Date); })
    .y(function(d) { return y(d.Close); });
var lowLine = d3.svg.line()
    .x(function(d) { return x(d.Date); })
    .y(function(d) { return y(d.Low); });

var area = d3.svg.area()
    .x(function(d) { return x(d.Date); })
    .y0(function(d) { return y(d.Low); })
    .y1(function(d) { return y(d.High); })

var svg = d3.select("#graphDiv")
    .append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
    .append("g")
        .attr("transform", 
        "translate(" + margin.left + "," + margin.top + ")")

function drawGraph(data) {
    // For each row in the data, parse the date
    // and use + to make sure data is numerical
    data.forEach(function(d) {
        d.Date = parseDate(d.Date);
        d.High = +d.High;
        d.Close = +d.Close;
      d.Low = +d.Low;
            });
    // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.Date; }));
        y.domain([d3.min(data, function(d) {
            return Math.min(d.High, d.Close, d.Low) }),
            d3.max(data, function(d) {
            return Math.max(d.High, d.Close, d.Low) })]);
    // Add the area path
        svg.append("path")
            .datum(data)
            .attr("class", "area")
            .attr("d", area)
    // Add the highLine as a green line
        svg.append("path")
            .style("stroke", "green")
            .style("fill", "none")
            .attr("class", "line")
            .attr("d", highLine(data));
    // Add the closeLine as a blue dashed line
        svg.append("path")
            .style("stroke", "blue")
            .style("fill", "none")
            .style("stroke-dasharray", ("3, 3"))
            .attr("d", closeLine(data));
    // Add the lowLine as a red dashed line
        svg.append("path")
            .style("stroke", "red")
            .attr("d", lowLine(data));
    // Add the X Axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + graphHeight + ")")
            .call(xAxis);
    // Add the Y Axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
    // Add the text for the "High" line
        svg.append("text")
            .attr("transform", "translate("+(graphWidth+3)+","+y(graphData[0].High)+")")
            .attr("dy", ".35em")
            .attr("text-anchor", "start")
            .style("fill", "green")
            .text("High");
    // Add the text for the "Low" line
        svg.append("text")
            .attr("transform", "translate("+(graphWidth+3)+","+y(graphData[0].Low)+")")
            .attr("dy", ".35em")
            .attr("text-anchor", "start")
            .style("fill", "red")
            .text("Low");
    // Add the text for the "Close" line
        svg.append("text")
            .attr("transform", "translate("+(graphWidth+3)+","+y(graphData[0].Close)+")")
            .attr("dy", ".35em")
            .attr("text-anchor", "start")
            .style("fill", "blue")
            .text("Close");
};

drawGraph(graphData);
当我运行flask服务器时，我得到了这个错误：
SyntaxError:expected属性名，在js代码
var graphData={{data.chart|u data | safe}的第一行中得到了{{{
。现在，如果我将此javascript代码内联到index.html中，一切正常。我做了一些研究，但没有解决我的问题，我仍然不知道为什么会发生这种情况。



<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>

    </style>
</head>
<body>
    <div id="graphDiv"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      var graphData = {{ data.chart_data | safe }}
    </script>
    <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</body>
</html>  


var graphData={{data.chart_data | safe}
这是因为这不是有效的JavaScript语法。这是Jinja2模板语法

您需要先定义
graphData
，然后才能在
main.js
文件中使用它。


var graphData={{data.chart_data | safe}
这是因为这不是有效的JavaScript语法。这是Jinja2模板语法

你需要先定义
graphData
，然后才能在
main.js
文件中使用它。

之所以会这样，是因为这不是有效的JavaScript语法。这是Jinja2模板语法。你只需要在模板中包含这一行，然后再包含另一个JavaScript文件，就可以了。@Craicerjack谢谢，我已经试过了，但是后来我得到了
graphData没有定义
这是因为这不是有效的JavaScript语法。这是Jinja2模板语法。你只需要在模板中包含这一行，然后再包含另一个JavaScript文件，就可以了。@Craicerjack谢谢，我已经尝试过了，但是我得到了
graphData没有定义
我明白了，我应该把
var graphData={{data.chart\u data | safe}}
放在
main.js
之前。非常感谢！很高兴能帮上忙。很高兴你把它分类了，我应该把
var graphData={{data.chart\u data | safe}}
在
main.js
之前。非常感谢！很高兴能帮上忙。很高兴你把它整理好了 
<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>

    </style>
</head>
<body>
    <div id="graphDiv"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      var graphData = {{ data.chart_data | safe }}
    </script>
    <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</body>
</html>