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

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

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

temp.csv
月，温度，温度
7月10日1月7日
7月30日
10月5日，5
15年5月25日
20,20,20
15年6月23日
20,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,0.4)",borderColor: "rgba(75,1)",borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: "rgba(75,pointBackgroundColor: "#fff",pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: "rgba(75,pointHoverBorderColor: "rgba(220,220,pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data : [{% for item in values %}
            {{item}},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}}",datasets : [{
label: '{{ legend1 }}',ill: true,data : [{% for item in values1 %}
            {{item}},spanGaps: false
 }]
}


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



var myChart2 = new Chart(ctx2,});
</script>
{% endblock %}

解决方法

我终于明白了。对于第二个图表，我正在调用第一个图表函数。更改了它，现在一切正常。
它应该是“ chartData2，而不是在我的html（Java脚本）代码结尾处的chartData

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