Seite 1 von 1

Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 12:20
von Vikardya
Hallo!
Ich bin derzeit dabei, einige Daten mithilfe von Flask in Diagrammen darzustellen. Bisher habe ich allerdingt nur Balkendiagramme benutzt, nun würde ich gerne ein Kreisdiagramm erstellen. Naiv wie ich bin dachte ich, ich müsse nur den chart_type ändern, hat auch fast geklappt.

So sieht derzeit mein Diagramm aus:
Bild

Meine Python-Programmierung sieht wie folgt aus: (Wie gesagt von den Balkendiagrammen übernommen)

Code: Alles auswählen

from flask import *

def index(self, chartID='chart_ID', chart_type='pie',
              chart_height=500, chart_width=800):
    
    xAxis = {}
    yAxis = {}
    series = [{"name":["A", "B", "C"], "data": [0.25,0.5,0.25]}]
    title = {"text": 'My PieChart'}

    chart = {"renderTo": chartID,
             "type": chart_type,
             "height": chart_height,
             "width": chart_width, }

    return self.render('admin/statistik.html',
                        chartID=chartID,
                        chart=chart,
                        series=series,
                        title=title,
                        xAxis=xAxis,
                        yAxis=yAxis)
Und zuletzt noch meine html-Programmierung:

Code: Alles auswählen

{% extends 'admin/master.html' %}

{% block body %}


<div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div>
<script>
    var chart_id = {{ chartID|safe }}
    var series = {{ series|safe }}
    var title = {{ title|safe }}
    var xAxis = {{ xAxis|safe }}
    var yAxis = {{ yAxis|safe }}
    var chart = {{ chart|safe }}

</script>
{% endblock body %}

{% block mainright %}


{% endblock mainright %}
Wenn man also mit der Maus über die einzelnen Elemente geht, steht dort immer "A, B, C: 0,25" bzw "A, B, C: 0,5"
Ich hätte aber gerne, dass dort wo "Slice" steht A, B und C steht, also beim blauen "A", beim schwarzen "B" und beim grünen "C".
Zur Not ginge auch, dass das "Slice" ganz verschwindet und ich unten drunter eine Legende mache mit Blau = A, Schwarz = B, Grün = C.

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 13:39
von noisefloor
Hallo,

welche Bibliothek verwendest du den client-seitig, um die Diagramme zu erzeugen? Die Info fehlt... Flaks an sich hat damit ja erst mal nichts zu tun.

Gruß, noisefloor

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 13:43
von Vikardya
Oh, total vergessen. Chart.js verwende ich :D

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 13:47
von noisefloor
Hallo,

was sagt den die API-Doku von chart.js dazu? Da sollte erklärt sein, wie man man chart.js Tortendiagramme erstellt.

Gruß, noisefloor

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 13:51
von lackschuh
Alternativ würde ich sonst noch pygal in den Raum werfen:
http://www.pygal.org/en/latest/document ... s/pie.html

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 14:00
von Vikardya
@noisefloor: Das ist da generell ganz anders dokumentiert als bei mir, vor allem weil das da (glaube ich) auch komplett in javascript programmiert ist... wenn ich das versuche in python umzuwandeln funktionierts nicht mehr...

@lackschuh: da ich den Rest jetzt auch schon mit chart.js gemacht habe, würde ich eigentlich auch gerne dabei bleiben, auch wenn deine Variante etwas leichter aussieht... :D

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 15:20
von Sirius3
@Vikardya: `chart.js` ist ja auch in JavaScript geschrieben, das kann man nicht in Python übersetzen. Du kannst nur versuchen, das passende Javascript automatisch mit der Flask-Template-Engine erstellen zu lassen, da steht aber an erster Stelle ein funktionierendes Javascript zu schreiben.

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 16:44
von Vikardya
Aber die passende chart.js Hab ich ja schon, die balkendiagramme funktionieren ja alle...kann ich da nicht einfach die gleiche verwenden? :K

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Montag 8. Januar 2018, 17:23
von noisefloor
Hallo,

chart.js ist doch "nur" die JavaScript-Bibliothek, die die Diagramme erstellt. Der musst du halt die Daten in der Struktur zur Verfügung stellen. Für Pie-Charts: http://www.chartjs.org/docs/latest/charts/doughnut.html, Abschnitt "Data Structure".

In deinem Template verwendest du doch JavaScript - das, was zwischen den `<script>` Tags steht... und in `admin/master.html` muss noch mehr JS stehen, sonst kann das Diagramm nirgendwo her kommen. Hast du die Templates selber geschrieben oder ist das Copy&Paste aus einer anderen Quelle?

Gruß, noisefloor

Re: Kreisdiagramme mit Flask erstellen

Verfasst: Dienstag 9. Januar 2018, 08:47
von Vikardya
@noisefloor:
Ja, in der admin/master.html steht noch mehr js, aber ich dachte nur das, was ich da geschrieben hatte (chart.html) ist hier maßgeblich ausschlaggebend...
Ein Freund von mir hatte hatte damit angefangen und ich versuche das jetzt zuende zu machen. Wie man merkt, hatte er etwas mehr Ahnung als ich :D