使用chart.js和Flask应用程序在一个页面上显示多个图表

我试图在一个网页上获得多个具有不同值的图表。我可以得到两个图表，但显示的数据相同。有人能帮我找到我缺少的东西吗？ 下面是App.py，我正在从csv文件中读取数据

临时csv
月份、温度、温度
1月7日、10日
二月七日，三十日
3月10日，5日
4月15日、25日
5月20日，20日
6月23日、15日
7月26日，20日

App.py

from flask import Flask, render_template, url_for, redirect, request
import pandas as pd
app = Flask(__name__)

@app.route('/')
def index():
df = pd.read_csv('temp.csv')

legend = 'Monthly Data'
legend1 = "Test"
labels = list(df.Month)
values = list(df.Temperature)
values1 = list(df.Temp)
return render_template('index.html', values=values, labels=labels, 
legend=legend,values1=values1, legend1=legend1)

if __name__ == "__main__":
app.run(debug=True)

下面是我的索引。html。我正在尝试调用App.py文件中的值

index.html

{% extends 'base.html' %}


{%block head %}
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My Chart.js Chart</title>
{% endblock %}

{% block body %}
<h1>Burn Page</h1>
<div class="container">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

<div class="container">
<canvas id="myChart2" width="400" height="200"></canvas>
</div>
<script>
Chart.defaults.global.responsive = false;

var chartData = {
labels : [{% for item in labels %}
         "{{item}}",
        {% endfor %}],
datasets : [{
  label: '{{ legend }}',
  fill: true,
  lineTension: 0.1,
  backgroundColor: "rgba(75,192,192,0.4)",
  borderColor: "rgba(75,192,192,1)",
  borderCapStyle: 'butt',
  borderDash: [],
  borderDashOffset: 0.0,
  borderJoinStyle: 'miter',
  pointBorderColor: "rgba(75,192,192,1)",
  pointBackgroundColor: "#fff",
  pointBorderWidth: 1,
  pointHoverRadius: 5,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 2,
  pointRadius: 1,
  pointHitRadius: 10,
  data : [{% for item in values %}
            {{item}},
          {% endfor %}],
  spanGaps: false
}]
}

var ctx = document.getElementById("myChart").getContext("2d");


var myChart = new Chart(ctx, {
type: 'line',
data: chartData,
});

Chart.defaults.global.responsive = false;

var chartData2 = {
labels : [{% for item in labels %}
         "{{item}}",
        {% endfor %}],
datasets : [{
label: '{{ legend1 }}',
ill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
  data : [{% for item in values1 %}
            {{item}},
          {% endfor %}],
  spanGaps: false
 }]
}


var ctx2 = document.getElementById("myChart2").getContext("2d");



var myChart2 = new Chart(ctx2, {
type: 'line',
data: chartData,
});
</script>
{% endblock %}

{%extends'base.html%}
{%block head%}
mychart.js图表
{%endblock%}
{%block body%}
烧录页
Chart.defaults.global.responsive=false；
var图表数据={
标签：[{%用于标签%中的项目]
“{{item}}”，
{%endfor%}]，
数据集：[{
标签：“{legend}}”，
填充：是的，
线张力：0.1，
背景颜色：“rgba（75192192,0.4）”，
边框颜色：“rgba（75192192,1）”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
pointBorderColor:“rgba（75192192,1）”，
pointBackgroundColor:#fff“，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:“rgba（75192192,1）”，
pointHoverBorderColor:“rgba（2201）”，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：[{%用于值%]中的项]
{{item}}，
{%endfor%}]，
空白：假
}]
}
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
键入：“行”，
数据：图表数据，
});
Chart.defaults.global.responsive=false；
var chartData2={
标签：[{%用于标签%中的项目]
“{{item}}”，
{%endfor%}]，
数据集：[{
标签：{{legend1}}}，
是的，
线张力：0.1，
背景颜色：“rgba（75192192,0.4）”，
边框颜色：“rgba（75192192,1）”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
pointBorderColor:“rgba（75192192,1）”，
pointBackgroundColor:#fff“，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:“rgba（75192192,1）”，
pointHoverBorderColor:“rgba（2201）”，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：[{%用于值1%中的项]
{{item}}，
{%endfor%}]，
空白：假
}]
}
var ctx2=document.getElementById（“myChart2”）.getContext（“2d”）；
var myChart2=新图表（ctx2{
键入：“行”，
数据：图表数据，
});
{%endblock%}

---

我终于明白了。对于第二个图表，我调用了第一个图表函数。改变了这一点，现在一切都正常了。
在html（java脚本）代码的末尾应该是“chartData2”，而不是chartData

数据：chartData2，
});
{%endblock%}

那么您希望CSV的

温度

和

温度

列有一个单独的图表？在一个图表（多个数据集）上有两行不是很有意义吗是的，是的。我本来打算在一张图表中显示两条线，但因为我的人希望它显示在生产车间的工作站上，并且认为这对工人来说太混乱了。

data: chartData2,
});
</script>
{% endblock %}