Plotly Graphs - Javascript 和 Jinja 之间的冲突

Posted 2023-02-18

【中文标题】Plotly Graphs - Javascript 和 Jinja 之间的冲突

【英文标题】：Plotly Graphs - Conflict between Javascript and 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 存储库中测试了另一个测试代码，以消除我无法识别的代码中可能存在一些输入错误的可能性。 但是那些复制粘贴示例给了我同样的问题。

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

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

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

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

（javascript部分无法识别语法）

【参考方案1】：

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

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

【讨论】：

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

【参考方案2】：

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

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

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

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