Plotly Graphs - Javascript 和 Jinja 之间的冲突

Question

我已经尝试使用 Plotly 在我的 Flask 网络应用程序中绘制图表，但由于某种原因无法正常工作，所以我开始简化问题以查找错误。

Jinja 语法似乎有问题 {{ myJSONfile |在 javascript.

中安全}}

只要我将一个空字符串“”传递给图形呈现的变量，但显然没有数据点。

（Inspect Element Console 给出了一个意外的标记 '{' Error refering to the first opening bracket of my Jinja variable）

根据我应该正确地在 javascript 块中编写语法，以便将 JSON-File 传递给 javascript 变量，我我现在没主意了。

如果有人有进一步的想法并且可以在这里帮助我，我将不胜感激:)

代码示例：

   {% extends "layout.html" %} {% block content %}

<div class=" row p-4 ">
    <div class="card m-auto " style="width: 90%; " data-aos="fade-left ">
        <div class="card-body ">
            <div id="chart1 "></div>
        </div>
    </div>
</div>


<script src="https://cdn.plot.ly/plotly-latest.min.js "></script>
<script>
    var graphs1 = {
        {
            graph1JSON | safe
        }
    };
    Plotly.plot("chart1 ", graphs1, {});
</script>

从那以后，我测试了教程 github 存储库中的另一个测试代码，以消除可能是我无法识别的代码中的一些键入错误的可能性。但是那些复制粘贴的例子给了我同样的问题。

我尝试了在 Whosebug 上找到的一些帖子中建议的不同方法

再次检查我的数据是否已正确保存到 app.py 中的 JSON 变量（的确如此）
使用像这样的引号：var graph1 = '{{ graph1JSON |安全}}'
使用块代码语法：var graph1 = {%block code %} {{ graph1JSON |安全 }} {%endblock 代码 %}
上述语法的几种组合

在调试过程中我清楚地看到 JSON 文件已成功创建并保存了所需的数据，Flask/Jinja 只是不想与 Javascript

通信

这是我的 VS Code 中语法高亮显示效果的附加屏幕截图。（除此特殊情况外，我的 Flask 应用运行很好，能够动态呈现页面等）

（语法在 javascript 部分无法识别）

Answer 1

请不要拆开jinja指令。 Jinja 在模板中寻找双大括号，它们直接紧跟在后面，中间没有空格。

var graphs1 = {{ graph1JSON | safe }};
Plotly.plot('chart1', graphs1, {});

Answer 2

这里的问题在于 VSCode，尤其是语法突出显示和格式扩展。您启用的一些扩展之间存在一些冲突，这些扩展在保存时以上述方式格式化 javascript 代码。

在 VSCode
我只激活了以下：

Python
Python Jayamanne 的扩展包
Samuel Colvin 的 Better Jinja

通过这种方式保存语法不会再被分解，从而使 JavaScript 正确识别您的 JSON-文件。

Plotly Graphs - Javascript 和 Jinja 之间的冲突

Plotly Graphs - Conflict between Javascript and Jinja

javascript

flask

plotly