Форум сайта python.su
Помогите построить диаграмму!
Вводные даные:
Есть веб приложение на Flask с БД в которой есть таблица из трех колонок:
class Pnh(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
date = db.Column(db.DateTime, default=datetime.utcnow)
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: '# of Votes',
data: amount_chart ,
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
@app.route('/chart')
def chart():
amount_titles = db.session.query(db.func.count(Pnh.title).filter(extract('year', Pnh.date) == 2023).filter(extract('month', Pnh.date) == 1)).all()
amount_chart = []
for x, in amount_titles:
amount_chart.append(x)
return render_template('chart.html', amount = json.dumps(amount_chart))
amount_titles = db.session.query(db.func.count(Pnh.title).filter(extract('year', Pnh.date) == 2023).filter(extract('month', Pnh.date) == 1)).all()
{% extends 'base.html' %}
{% block title %}
График
{% endblock %}
{% block body %}
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let amount_chart = JSON.parse({{ amount | tojson }});
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: '# of Votes',
data: amount_chart ,
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock %}
Отредактировано Vitek64 (Сен. 18, 2023 14:42:03)
Прикреплённый файлы:
Screenshot_20230916-124350_Chrome.jpg (124,3 KБ)
Офлайн
Оберни код в теги - нечитабельно
Офлайн
ZerGПрошу прощения, уже исправил)
Оберни код в теги - нечитабельно
Офлайн
покажите что выводит принтом amount_titles
что бы понять структуру которуб вам возвращает
Но вобще во всех примерах идет что-то типа
import Chart from 'chart.js/auto' (async function() { const data = [ { year: 2010, count: 10 }, { year: 2011, count: 20 }, { year: 2012, count: 15 }, { year: 2013, count: 25 }, { year: 2014, count: 22 }, { year: 2015, count: 30 }, { year: 2016, count: 28 }, ]; new Chart( document.getElementById('acquisitions'), { type: 'bar', data: { labels: data.map(row => row.year), datasets: [ { label: 'Acquisitions by year', data: data.map(row => row.count) } ] } } ); })();
data: amount_titles.map(amount_titles.XXX)
Офлайн
ZerGМне по ходу надо глубже изучить JS, чтобы понять что вы написали..).
покажите что выводит принтом amount_titlesчто бы понять структуру которуб вам возвращаетНо вобще во всех примерах идет что-то типа
data: amount_titles.map(amount_titles.XXX)
Офлайн
Имя ключа по которому итерироваться - внимательно посмотрите на структуру данных в примере и что в этом месте вместо иксов
Офлайн