Fatal编程技术网
  • python-3.x/
  • Python 3.x 如何将烧瓶中的两个系列发送到Chartist.js绘制

Python 3.x 如何将烧瓶中的两个系列发送到Chartist.js绘制

python-3.x flask

Python 3.x 如何将烧瓶中的两个系列发送到Chartist.js绘制,python-3.x,flask,chartist.js,Python 3.x,Flask,Chartist.js,我想将2019年的结果与2020年的结果进行比较。为了比较数据，我使用Chartist.js创建了一个图表；当我只使用一个系列时，显示图形（如图所示）；然而，当我发送两个系列时，我没有得到图表。出于某种原因，金甲2中的说明似乎不正确。在我的代码中出现错误的任何建议都将非常有用 使用系列[100200300]获取图形的源代码如下： @app.route('/chart') def chart(): labels = ["Jan", "Feb", "Mar"] series =

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

使用系列[100200300]获取图形的源代码如下：

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

<!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>
chart.html文件如下所示：

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

<!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>
并对jinja2中的chart.html文件进行更改（如下代码所示）：


风险值数据={
//可以包含任何类型值的标签数组
//标签：[“周一”、“周二”、“周三”、“周四”、“周五”]，
标签：[{%用于标签%中的项目]
“{{item}}”，
{%endfor%}]，
//我们的系列数组包含系列对象，本例中为系列数据数组
系列：[[{%用于系列%]中的项目]
“{{item}}”，
{%endfor%}]，
[{%系列中的项目%}
“{{item}}”，
{%endfor%}]
]
};
变量选项={
宽度：“640px”，
高度：“320px”
}
//创建一个新的折线图对象，作为第一个参数传入选择器
//这就是解析我们的图表容器元素。第二个参数
//是实际的数据对象。
新图表列表线（“#图表4”，数据）；
我得到了一张没有绘制趋势线的图。在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>


风险值数据={
//可以包含任何类型值的标签数组
//标签：[“周一”、“周二”、“周三”、“周四”、“周五”]，
标签：[{%用于标签%}{{item}}中的项，{%endfor%}]，
//我们的系列数组包含系列对象，本例中为系列数据数组
系列：[
[1,2,3],
[3,2,1]
]
};
变量选项={
宽度：“640px”，
高度：“320px”
}
//创建一个新的折线图对象，作为第一个参数传入选择器
//这就是解析我们的图表容器元素。第二个参数
//是实际的数据对象。
新图表列表线（“#图表4”，数据）；
这比你想象的要容易。
此外，对于该系列，您不需要在
{{item}}
周围加引号。
试试这个：

    var data = {
        labels: [   {% for item in labels %}
                        "{{ item }}",
                    {% endfor %}
                ],
        series: [   {% for item in series %} 
                        {{ item }}, 
                    {% endfor %}
                ]
    };
这比你想象的要容易。
此外，对于该系列，您不需要在
{{item}}
周围加引号。
试试这个：

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

我得到了两个系列完美绘制的图形。经验教训：在jinja2中，标签使用“{item}”；对于数据系列{{item}}非常感谢。我花了一整天的时间测试。在你的帮助下结案的满足感。南美洲星期四凌晨2:58。是时候休息了，满足了要求。我得到了两个系列完美绘制的图形。经验教训：在jinja2中，标签使用“{item}”；对于数据系列{{item}}非常感谢。我花了一整天的时间测试。在你的帮助下结案的满足感。南美洲星期四凌晨2:58。是时候休息了，满足了要求。