diagramă cu coloane stivuite pentru două seturi de date – Google Charts (Programare, Diagrame, Vizualizare Google, Stivuite)

mavili a intrebat.
a intrebat.

Generez niște Google Charts și sunt blocat aici. Google vă permite să aveți coloane stivuite. Dar este limitat sau nu pot configura să funcționeze. Luat din Google, iată un exemplu care arată numărul de cești de cafea produse în fiecare an pentru două țări:

Să spunem că am un alt set de date pentru aceleași două țări, dar de data aceasta am cafea instant în loc de cafea măcinată. Exemplu:

Ceea ce aș dori să fac este să suprapun aceste două seturi de date. Astfel, fiecare coloană ar reprezenta o singură țară, dar două diviziuni: cafea boabe și cafea instant.

Mă gândeam dacă există o modalitate de a formata tabelul de date în felul următor:

['Year', 'Austria', 'Austria (instant)', 'Bulgaria', 'Bulgaria (instant')],
['2003', 1736060, 10051, 250361, 68564],
['2004', 1338156, 65161, 786849, 1854654],
['2005', 1276579, 65451, 120514, 654654]

pentru a genera ceva de genul

Ajutorul dumneavoastră este apreciat.

Comentarii

  • Bună ziua, puteți utiliza Combo chart google-developers.appspot.com/chart/interactive/docs/gallery/…, , –  > Por Jothi Kannan.
  • Nu știu cum își face treaba? –  > Por mavili.
  • Bună, uitați-vă aici developers.google.com/chart/image/docs/gallery/bar_charts, , aici, în Chart Types , verificați cu tipul de diagramă bvo, v-ar putea ajuta mai mult – -.  > Por Jothi Kannan.
  • @jothikannan, este posibil să funcționeze, dar numai în graficele cu imagini, nu în cele interactive. –  > Por asgallant.
  • chiar dacă ar putea funcționa cu diagramele de imagine, puteți vedea că scrie „deprecated” pe pagină, deci poate că nu mai este furnizat de Google. –  > Por mavili.
4 răspunsuri
Dan Hogan

Tocmai m-am lovit de aceeași problemă astăzi și am urmat link-ul de trimitere. Se pare că tocmai recent cineva a răspuns cu acest lucru:

„Acest lucru este de fapt posibil cu noua diagramă Material Bar (deși într-un mod oarecum ocolit). În noua diagramă, dacă faceți o diagramă stivuită, dar plasați unele serii pe o axă diferită, aceasta creează o stivă separată pentru acele serii. Din păcate, în prezent nu există încă o modalitate de a ascunde complet o axă și va trebui să setați în mod explicit fereastra de vizualizare. În cele din urmă, vom introduce opțiuni de ascundere a axelor și de aliniere a ferestrelor de vizualizare, dar deocamdată va trebui să ne mulțumim cu acest lucru.”

Această scripcă a părut să mă ajute să rezolv această problemă: http://jsfiddle.net/p7o0pjgg/

Iată codul:

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

Comentarii

  • De fapt, am văzut răspunsul tău abia acum 😉 tocmai pentru că mă îndepărtasem de această cerință cu ceva timp în urmă și nu mi-am dat seama că există un nou răspuns la ea de mai bine de un an! Dar fiddle-ul este o dovadă suficientă că aceasta este de fapt soluția. mulțumesc -.  > Por mavili.
  • Este încă posibil cu ultima revizuire a bibliotecii? Codul de mai sus nu va funcționa cu versiunea curentă –  > Por Julien M.
  • @Julien Cred că încă funcționează în principiu. Este posibil ca exemplul JSFiddle furnizat să aibă o eroare minoră care îl împiedică să funcționeze. Vedeți răspunsul meu de mai jos pentru o copie funcțională. –  > Por Damien Bezborodow.
  • Am impresia că nu funcționează pentru diagramele Combi. Am preluat vioara din documentația Google Chart și am adăugat targetAxisIndex: nu funcționează. Mi-a scăpat ceva? –  > Por dma_k.
  • Ce pași trebuie urmați pentru a adăuga adnotări la graficul de mai sus? –  > Por krishna_tandon.
asgallant

API-ul de vizualizare nu acceptă crearea mai multor stive de coloane pentru fiecare rând de date. Puteți face o solicitare de funcționalitate pentru a adăuga suport pentru acest lucru, dacă doriți.

Comentarii

  • Mulțumesc, amice, tocmai am trimis o cerere de funcționalitate. Va fi atât de mișto dacă vor adăuga acest lucru. –  > Por mavili.
  • aici este linkul către cerere: mai multe diagrame de bare suprapuse –  > Por mavili.
  • Am patru coloane în grafic, dar vreau să stivuiesc doar două coloane, cum se face? –  > Por Rana Aalamgeer.
Mark Schiefelbein

Puteți face acest lucru utilizând un stacked column chart, , unde toate seriile de date dintr-un grup (de exemplu, cafea măcinată) se află pe axa din stânga, iar toate seriile de date din celălalt grup pe axa din dreapta (cafea instant).

date și configurarea graficului cu coloane suprapuse

seriile din grupul 2 au fost mutate pe axa din dreapta

Damien Bezborodow

Răspunsul lui Dan Hogan a funcționat pentru mine. Cu toate acestea, exemplul JSFiddle nu părea să funcționeze (nu sunt sigur, de ce.) Iată o versiune care funcționează pentru mine.

Comentarii

  • Am patru coloane în diagramă, dar vreau să stivuiesc doar două coloane, cum se face? –  > Por Rana Aalamgeer.
  • Există o modalitate de a adăuga adnotări în graficul de mai sus? –  > Por krishna_tandon.