Kreisdiagramme mit Flask erstellen

Django, Flask, Bottle, WSGI, CGI…
Antworten
Vikardya
User
Beiträge: 12
Registriert: Mittwoch 3. Januar 2018, 15:48

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.
Benutzeravatar
noisefloor
User
Beiträge: 3843
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

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
Vikardya
User
Beiträge: 12
Registriert: Mittwoch 3. Januar 2018, 15:48

Oh, total vergessen. Chart.js verwende ich :D
Benutzeravatar
noisefloor
User
Beiträge: 3843
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

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
lackschuh
User
Beiträge: 281
Registriert: Dienstag 8. Mai 2012, 13:40

Alternativ würde ich sonst noch pygal in den Raum werfen:
http://www.pygal.org/en/latest/document ... s/pie.html
Vikardya
User
Beiträge: 12
Registriert: Mittwoch 3. Januar 2018, 15:48

@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
Sirius3
User
Beiträge: 17712
Registriert: Sonntag 21. Oktober 2012, 17:20

@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.
Vikardya
User
Beiträge: 12
Registriert: Mittwoch 3. Januar 2018, 15:48

Aber die passende chart.js Hab ich ja schon, die balkendiagramme funktionieren ja alle...kann ich da nicht einfach die gleiche verwenden? :K
Benutzeravatar
noisefloor
User
Beiträge: 3843
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

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
Vikardya
User
Beiträge: 12
Registriert: Mittwoch 3. Januar 2018, 15:48

@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
Antworten