javascript - Jinja、Flask 和 CanvasJS 不显示图表

Question

我正在尝试从 API 获取数据，使用 Jinja 将其传递到模板，并使用 CanvasJS 绘制数据图表。

当使用内置值时，如在 CanvasJS 示例中，图表会正确显示；然而，第二次我尝试使用 Jinja 输入值时，图表无法显示。

额外代码的一个原因是 API 以“YYYY-MM-DD”形式返回日期，而 JS 需要单独的值，因此我使用 Jinja 拆分它们。也许，我可以改用 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很好。问题是我无法在没有方括号的情况下点击 {{ }}。

请开始公开鞭笞。