时间戳

首页 > 解决方案 > 使用 chart.js 和 Flask 应用程序在一页上显示多个图表

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

问题描述

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

temp.csv
Month,Temperature,Temp
January,7,10
February,7,30
March,10,5
April,15,25
May,20,20
June,23,15
July,26,20

应用程序.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 文件中调用值。

索引.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 %}

我得到两个图表但数据相同

标签： flaskchart.js

解决方案

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

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

推荐阅读