如何从 Flask 发送两个系列以供 Chartist.js 绘制

Question

我想将 2019 年的结果与 2020 年的结果进行比较。为了比较数据，我使用 Chartist.js 创建了一个图表；当我只使用一个系列时，会显示图表（如图所示）；但是，当我发送两个系列时，我没有得到图表。由于某种原因，jinja2 中的说明似乎不正确。在我的代码中出现错误的任何建议都会非常有帮助。

利用数列[100,200,300]获取图形的源码如下：

@app.route('/chart')
def chart():
    labels = ["Jan", "Feb", "Mar"] 
    series =  [100, 200, 300]          
    return render_template('chart.html',labels=labels, series=series)

chart.html文件如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>

<style>
  body {
    background-color: #222;
    padding: 20px;
    font-family: arial;
  }

  #chart4 {
    background-color: slategrey;
    border-radius: 10px;
    padding-top: 10px;
  }

  #title{
    color:slategrey;
    margin-bottom: 10px;
  }


  /* Customizing plain Css:  */


  /* First series a */

  .ct-series-a .ct-line {
    stroke: black;
    stroke-width: 4px;
  }

  .ct-series-a .ct-point {
    stroke: red;
    stroke-width: 14px;
  }


  /* Second series b */

  .ct-series-b .ct-line {
    stroke: Orange;
    stroke-width: 4px;
  }

  .ct-series-b .ct-point {
    stroke: black;
    stroke-width: 14px;
  }

  /* Custom Css for the labels */

  #labels{
    padding-top:10px;
    display;block;
    height: 30px;
    width: 100%;
    border-radius:4px;
    margin-bottom: 10px;
    background-color: slategrey;
    text-align:center;
  }

  #series-b{
    float:right;
  }


  .label-series-a{
    stroke:black;
    fill:orange;
    stroke-width: 4px;
  }

  .label-series-b{
    stroke:red;
    fill:black;
    stroke-width: 4px;
  }


</style>

<body>
  <div id="title">Comparative analytics between 2019 and 2020:</div> 
  <div id="labels"> 2019: <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0"
          width="14" height="14"
          rx="2" ry="2"
          class="label-series-b"
          />
  </svg> 
  &nbsp;&nbsp;2020:
      <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0"
          width="14" height="14"
          rx="2" ry="2"
          class="label-series-a"
          />
  </svg>

  </div>

  <div id="chart4" class="ct-chart"></div>  


<script>
    var data = {
        // A labels array that can contain any sort of values
        // labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        labels: [{% for item in labels %}
                    "{{ item }}",
                {% endfor %}],
        // Our series array that contains series objects or in this case series data arrays

        series: [ [{% for item in series %} 
                    "{{ item }}", 
                   {% endfor %}]
                ]
    };

      var options = {
          width: "640px",
          height: "320px"
      }

      // Create a new line chart object where as first parameter we pass in a selector
      // that is resolving to our chart container element. The Second parameter
      // is the actual data object.
      new Chartist.Line('#chart4', data);
</script>

通过修改我在@app.route ('/chart') 中的代码有两个系列 [[100, 200, 300], [10,20,30]]

@app.route('/chart')
def chart():
   labels = ["Jan", "Feb", "Mar"] 
   series =  [[100, 200, 300],[10,20,30]]          
   return render_template('chart.html',labels=labels, series=series)

并对 jinja2 中的 chart.html 文件进行更改（如以下代码所示）：

    <script>
    var data = {
        // A labels array that can contain any sort of values
        // labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        labels: [{% for item in labels %}
                    "{{ item }}",
                {% endfor %}],
        // Our series array that contains series objects or in this case series data arrays
        series: [ [{% for item in series %} 
                    "{{ item }}", 
                   {% endfor %}],

                   [{% for item in series %} 
                   "{{ item }}", 
                    {% endfor %}]
               ]
    };

      var options = {
          width: "640px",
          height: "320px"
      }

      // Create a new line chart object where as first parameter we pass in a selector
      // that is resolving to our chart container element. The Second parameter
      // is the actual data object.
      new Chartist.Line('#chart4', data);
</script>

我得到了一张没有绘制趋势线的图表。 chart.html 我在 jinja2 的代码哪里出错了？

如果我在脚本标签中对系列进行硬编码，例如 [[1,2,3], [3,2,1]]，我会正确地得到图表。这表明问题出在 html 页面上的 jinja2 编码中。我仍然不确定是什么原因，任何建议将不胜感激。

    <script>
    var data = {
        // A labels array that can contain any sort of values
        // labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        labels: [{% for item in labels %} "{{ item }}", {% endfor %}],
        // Our series array that contains series objects or in this case series data arrays
        series: [ 
                [1,2,3],
                [3,2,1]
        ]
    };

      var options = {
          width: "640px",
          height: "320px"
      }

      // Create a new line chart object where as first parameter we pass in a selector
      // that is resolving to our chart container element. The Second parameter
      // is the actual data object.
      new Chartist.Line('#chart4', data);
    </script>

Answer 1

这比您想的要容易。
此外，对于该系列，您不需要 {{ item }} 周围的引号。
试试这个：

    var data = {
        labels: [   {% for item in labels %}
                        "{{ item }}",
                    {% endfor %}
                ],
        series: [   {% for item in series %} 
                        {{ item }}, 
                    {% endfor %}
                ]
    };

如何从 Flask 发送两个系列以供 Chartist.js 绘制

How to send two series from Flask to be plotted by Chartist.js

flask

python-3.x

chartist.js