Plotly Graphs - Javascript 和 Jinja 之间的冲突答案

【问题标题】：Plotly Graphs - Conflict between Javascript and JinjaPlotly Graphs - Javascript 和 Jinja 之间的冲突
【发布时间】：2021-12-20 11:58:15
【问题描述】：

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

Jinja 语法 {{ myJSONfile | javascript 中的安全 }}。

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

（检查元素控制台给出了一个意外的标记“{”错误，指的是我的 Jinja 变量的第一个左括号）

根据this post，我应该在 javascript 块中正确编写语法，以便将 JSON 文件传递给 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 存储库中测试了另一个测试代码，以消除我无法识别的代码中可能存在一些输入错误的可能性。但是那些复制粘贴示例给了我同样的问题。

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

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

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

这是我的 VS 代码中语法高亮显示的附加屏幕截图。（除了在这种特殊情况下，我的 Flask 应用程序运行良好，能够动态呈现页面等）

（javascript部分无法识别语法）

【问题讨论】：

标签： javascript flask plotly

【解决方案1】：

请不要拆开神社指令。 Jinja 在模板中查找双花括号，它们直接相互跟随，中间没有空格。

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

【讨论】：

是的，确实，问题是一些自动格式化的 VSCode 扩展总是在保存时破坏语法 - 请参阅我刚刚发布的答案我很高兴它现在可以工作，感谢您阅读我的问题并接受是时候帮忙了:)

【解决方案2】：

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

在 VSCode 中禁用所有启用的格式化扩展
我只激活了以下内容：

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

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

【讨论】：