So erstellen Sie Gruppierungs- und Klassifizierungsstatistik -Diagrammanzeigen mit PHP und VUE.JS

So erstellen Sie Gruppierungs- und Klassifizierungsstatistik -Diagrammanzeigen mit PHP und VUE.JS

Einführung:
Statistische Diagramme sind eines der wichtigsten Mittel zur Datenvisualisierung, die uns helfen, Daten visuell anzuzeigen und zu verstehen. In diesem Artikel werden wir eingehend erklären, wie man PHP mit Vue.js kombiniert, um statistische Diagrammeffekte von Gruppierung und Klassifizierung zu erzielen. Wir werden Ihnen nach und nach Codebeispiele von der Datenverarbeitung bis zur Front-End-Anzeige anbieten.

Schritt 1: Bereiten Sie die Daten vor

Zunächst müssen wir einige grundlegende Daten für die Präsentation erstellen. In diesem Beispiel werden wir als Beispiel Verkaufsdaten aufnehmen, und die Datenstruktur lautet wie folgt:

$ Data = [
    ['Group' => 'A', 'Kategorie' => 'Cat1', 'Betrag' => 100],
    ['Group' => 'A', 'Kategorie' => 'Cat1', 'Betrag' => 150],
    ['Group' => 'A', 'Kategorie' => 'Cat2', 'Betrag' => 200],
    ['Group' => 'B', 'Kategorie' => 'Cat2', 'Betrag' => 300],
    ['Group' => 'B', 'Kategorie' => 'Cat1', 'Betrag' => 180],
    ['Group' => 'C', 'Kategorie' => 'Cat1', 'Betrag' => 120],
    ['Group' => 'C', 'Kategorie' => 'Cat2', 'Betrag' => 250]
];

Schritt 2: Backend -Verarbeitungsdaten

Als nächstes müssen wir PHP verwenden, um die Daten für die Anzeige von Front-End-Diagrammen zu verarbeiten. Hier ist ein PHP -Code -Beispiel:

$ gruppedData = [];

foreach ($ data as $ row) {
    $ gruppe = $ row ['Group'];
    $ category = $ row ['Kategorie'];
    $ betragen = $ row ['Betrag'];

    if (! isset ($ gruppedData [$ gruppe])) {
        $ gruppedData [$ gruppe] = [];
    }
    if (! isset ($ gruppedData [$ gruppe] [$ category])) {
        $ gruppedData [$ gruppe] [$ kategorie] = 0;
    }

    $ gruppedData [$ gruppe] [$ kategorie] += $ betragen;
}

echo json_encode ($ gruppedData);

Schritt 3: Front-End-Display

Nachdem wir die Backend -Daten bereit haben, werden wir Vue.js verwenden, um diese Daten anzuzeigen. Hier ist ein Codebeispiel für HTML und Vue.js:

Beispiel für HTML -Code:

<div id="app">
    <div v-for="(groupData, group) in groupedData" :key="group">
        <h3>{{Gruppe}}</h3>
        <table>
            <tr v-for="(amount, category) in groupData" :key="category">
                <td>{{Kategorie}}</td>
                <td>{{ Menge }}</td>
            </tr>
        </table>
    </div>
</div>

Vue.js Code Beispiel:

neuer Vue ({{
    EL: '#App',
    Daten: {
        gruppedData: []
    },
    montiert () {
        Axios.get ('/api/data.php')
            .then (response => {
                this.groupedData = response.data;
            })
            .Catch (error => {
                console.log (Fehler);
            });
    }
});

Im obigen Code -Beispiel implementieren wir die Funktion der Gruppierung und Klassifizierung von Daten nach "Gruppe" und "Kategorie". Durch die V-for-Richtlinie von Vue.js können wir jede Gruppe durchlaufen und die Daten dynamisch auf dem Front-End anzeigen.

Zusammenfassen

In diesem Artikel erklären wir ausführlich, wie die statistische Diagrammanzeige von Gruppierung und Klassifizierung über PHP und VUE.JS. Zuerst verarbeiten wir die Daten über PHP und zeigen dann die Daten auf der Front-End-Seite dynamisch über vue.js. Hoffentlich hilft Ihnen dieser Artikel besser zu verstehen, wie Sie die Wirksamkeit der Gruppierung und Kategorisierung statistischer Diagramme erreichen können.