Jinja、Flask 和 CanvasJS 不显示图表答案

【问题标题】：Graphs not showing with Jinja, Flask, and CanvasJSJinja、Flask 和 CanvasJS 不显示图表
【发布时间】：2019-11-16 19:06:59
【问题描述】：

我正在尝试从 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 的方式存在问题，但我无法发现它。我注意到的一件事是，最后一个日期值伴随着一个令人讨厌的“]”，似乎不想消失。

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

【问题讨论】：

标签： javascript python jinja2 canvasjs

【解决方案1】：

有一个主要问题：

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

神社很好。 JS很好。我无法在没有方括号的情况下点击{{ }} 是问题所在。

请开始公开鞭笞。

【讨论】：