Parsarea datelor JSON în graficul de bare Chart.js (Programare, Javascript, Json, Ajax, Chart.Js)

Jack84 a intrebat.

Încerc să folosesc Chart.js pentru a genera un grafic de bare folosind date generate dinamic din baza de date Oracle. Am probleme în a obține datele în formatul corect, cred că sunt aproape, dar sunt blocat de ceva timp.

Fișierul meu JSON:

[{"REGION":"Poland","REV_VALUE":"2263"},{"REGION":"United States","REV_VALUE":"1961"},{"REGION":"Spain","REV_VALUE":"555"},{"REGION":"United Kingdom","REV_VALUE":"380"},{"REGION":"Germany","REV_VALUE":"314"}]

Și aici este fișierul meu barchar.js:

Am încercat să implementez o soluție pe care am găsit-o în alte subiecte, dar tot fără succes. orice ajutor ar fi foarte apreciat!

Comentarii

  • Vă mulțumim pentru furnizarea fragmentului de date JSON, a făcut mult mai ușoară formularea unui răspuns real. Mult succes, anunțați-mă dacă există probleme și dacă răspunsul meu a reușit să vă pună pe drumul cel bun. –  > Por Fișier.
  • Vă mulțumesc foarte mult pentru timpul și ajutorul acordat. Funcționează perfect pentru mine! Am revenit pe drumul cel bun, mulțumită vouă. –  > Por Jack84.
2 răspunsuri
Fișier

Am făcut asta repede ca să vă dau un exemplu care să vă ajute, erați pe drumul cel bun. Am extrasul folosind date hardcoded pentru exemplificare, iar apoi în partea de jos am folosit metoda Ajax.

Am analizat datele astfel, similar cu ceea ce făceai tu folosind data.map().

let region = [];
let rev_value = [];

try {
  data.map((item) => {
    rev_value.push(item.REV_VALUE);
    region.push(item.REGION);
  });
} catch (error) {
  console.log(error);
}

Apoi, pentru a utiliza datele, am folosit pur și simplu un operator de răspândire pentru conținutul array-ului [...].

labels: [...region],
data: [...rev_value],

Exemplul 1 folosind Canvas.js exemplu simplu cu datele dvs. codificate în mod greșit.

Exemplul 2 folosind șablonul dvs. și un apel Ajax, schimbați URL-ul pentru cerere.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
    function grab() {
        /* Promise to make sure data loads */
        return new Promise((resolve, reject) => {
            $.ajax({
                url: "/data.json",
                method: "GET",
                dataType: 'JSON',
                success: function(data) {
                    resolve(data)
                },
                error: function(error) {
                    reject(error);
                }
            })
        })
    }

    $(document).ready(function() {
        grab().then((data) => {
            console.log('Recieved our data', data);
            let regions = [];
            let value = [];

            try {
                data.forEach((item) => {
                    regions.push(item.REGION)
                    value.push(item.REV_VALUE)
                });

                let chartdata = {
                    labels: [...regions],
                    datasets: [{
                        label: 'Region',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: [...value]
                    }]
                };

                let ctx = $("#myChart");

                let barGraph = new Chart(ctx, {
                    type: 'bar',
                    data: chartdata
                });

            } catch (error) {
                console.log('Error parsing JSON data', error)
            }

        }).catch((error) => {
            console.log(error);
        })
    });
</script>

Comentarii

  • Exemplul 2 este ceea ce căutam. Vă mulțumesc foarte mult pentru sprijin și răspuns prompt. –  > Por Jack84.
Ilias Korompilis

Puteți încerca ceva de genul acesta :

    dataPoints: variable ? variable.map((v) => ({x: (v.region), y: v.value})) : []

Comentarii

  • Încercați să vă actualizați răspunsul pentru a arăta cum poate fi folosit în codul OPs. –  > Por quicklikerabbit.