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

【问题标题】：Multiple chart on one page using chart.js and Flask app使用 chart.js 和 Flask 应用程序在一页上显示多个图表
【发布时间】：2021-11-12 10:01:55
【问题描述】：

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

temp.csv
月、温度、温度
10 年 1 月 7 日
2 月 7 日 30 日
三月，10，5
25 年 4 月 15 日
20 年 5 月 20 日
2015 年 6 月 23 日
20年7月26日

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 %}

【问题讨论】：

所以您想要一个单独的图表用于 CSV 的 Temperature 和 Temp 列？在一个图表（多个数据集）上有两条线不是有意义吗？
是的，是的。我本来打算在一张图表中包含两条线，但因为我的人希望它显示在生产车间站，并且认为这对工人来说太混乱了。

标签： flask chart.js

【解决方案1】：

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

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

【讨论】：