Plotly Graphs - Javascript 和 Jinja 之间的冲突

Posted

技术标签:

【中文标题】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 文件。

【讨论】:

以上是关于Plotly Graphs - Javascript 和 Jinja 之间的冲突的主要内容,如果未能解决你的问题,请参考以下文章

如何在 HTML 网页中显示多个 Plotly 图? (使用 plot_div)

Plotly:如何使用plotly-dash在一页上创建“输入文本”并在第二页或选项卡上输出(图形)?

配置 Graphs

GitHub 在其 Graphs 页面上使用啥图形库?

zabbix专题:第七章 添加图像Graphs,添加聚合图形Screens

Representations of graphs