Jinja、Flask 和 CanvasJS 不显示图表

Question

我正在尝试从 API 获取数据，使用 Jinja 将其传递给模板，并使用 CanvasJS.

绘制数据图表

当使用烘焙值时，如 CanvasJS 示例中那样，图表显示正确；然而，第二次我尝试使用 Jinja 输入值时，图表无法显示。

额外代码的一个原因是 API returns 日期采用 "YYYY-MM-DD" 形式，而 JS 需要单独的值，所以我将它们分开使用神社。或许，我可以改用 JS 拆分它们。

我的 CanvasJS 代码 + Jinja 看起来像这样：

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "{{ ticker_symbol }}"
        },
        zoomEnabled: true,
        axisY: {
            includeZero:false,
            title: "Prices",
            prefix: "$ "
        },
        axisX: {
            interval:2,
            intervalType: "month",
            valueFormatString: "MMM-YY",
            labelAngle: -45
        },
        data: [
        {
            type: "candlestick",
            dataPoints: [
            {% for key, value in data.items() %}
                {% set dates = key.split("-") %}
                {x: new Date({{ dates[0] }}, {{ dates[1] }}, {{ dates[2] }}]),y:[{{ value['1. open'] }}, {{ value['2. high'] }}, {{ value['3. low'] }}, {{ value['4. close'] }}]},
            {% endfor %}
            ]
        }
        ]
    });
    chart.render();
}

数据正在进入页面，在原位查看文件源时显示在 JS 中。

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "MSFT"
        },
        zoomEnabled: true,
        axisY: {
            includeZero:false,
            title: "Prices",
            prefix: "$ "
        },
        axisX: {
            interval:2,
            intervalType: "month",
            valueFormatString: "MMM-YY",
            labelAngle: -45
        },
        data: [
        {
            type: "candlestick",
            dataPoints: [


                {x: new Date(2019, 11, 15]),y:[148.9300, 149.9900, 148.2700, 149.9700]},
                ...(repeated)...
        ]
        }
        ]
    });
    chart.render();
}

但是图表还是没有显示！

我确定将数据解析为 JS 的方式存在问题，但我无法发现它。我注意到的一件事是，最后一个日期值伴随着一个烦人的“]”，它似乎不想消失。

任何帮助将不胜感激，谢谢！

Answer 1

有一个主要问题：

我在为图表设置 x: 变量时有一个额外的 ]。这是破坏整个图表的主要因素。

Jinja 很好。 JS很好。问题是我无法在没有方括号的情况下击中 {{ }}。

请开始public鞭笞。

Jinja、Flask 和 CanvasJS 不显示图表

Graphs not showing with Jinja, Flask, and CanvasJS

javascript

python

jinja2

canvasjs