web-dev-qa-db-ja.com

2つのデータセットの積み上げ縦棒グラフ-Googleグラフ

Googleチャートをいくつか作成していますが、ここで行き詰まっています。 Googleでは、列を積み重ねることができます。ただし、制限があるか、機能するように構成できません。グーグルから取られた、これは2つの国のために毎年生産されたコーヒーのカップの数を示す例です：

number of cups of BEAN COFFEE per year for Austria and Belgium

たとえば、同じ2か国について別のデータセットがあるとしますが、今回は挽いたものではなくインスタントコーヒーを使用しています。例：

number of cups of INSTANT COFFEE per year for Austria and Belgium

私がしたいことは、これらの2つのデータセットを互いに積み重ねることです。したがって、各列は1つの国になりますが、2つの部門（豆とインスタントコーヒー）になります。

次のようにデータテーブルをフォーマットする方法があるかどうか私は考えていました：

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

のようなものを生成する

enter image description here

よろしくお願いします。

chartsgoogle-visualizationstacked
18
mavili

今日同じ問題に遭遇し、あなたの提出リンクをたどっただけです。最近誰かがこれで答えたようです：

「これは新しいマテリアルバーチャートで実際に可能です（多少ラウンドアバウトな方法ですが）。新しいチャートで、チャートを積み上げて、別の軸に系列を配置すると、それらの系列に個別のスタックが作成されます。残念ながら、現時点ではまだ完全に軸を非表示にする方法はなく、ビューウィンドウを明示的に設定する必要があります。最終的には、軸を非表示にし、ビューウィンドウを整列するオプションを導入しますが、これは今のところ必要です。」

このフィドルは、私がこの問題を解決するのに役立つようでした： http://jsfiddle.net/p7o0pjgg/

これがコードです：

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));
};
16
Dan Hogan

Visualization APIは、データの行ごとに複数の列スタックを作成することをサポートしていません。必要に応じて 機能リクエスト を作成して、これに対するサポートを追加できます。

4
asgallant

ダンホーガンの答えは私に役立ちました。ただし、JSFiddleの例は機能していないようです（理由は不明です）。これは私にとって機能するバージョンです。

google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(function() {
    $('.service-usage-graph').each(function() {

        var table = new google.visualization.DataTable();
        table.addColumn('string', 'Date');
        table.addColumn('number', 'UL Peak');
        table.addColumn('number', 'UL Off-peak');
        table.addColumn('number', 'DL Peak');
        table.addColumn('number', 'DL Off-peak');

        table.addRow(['2001-01-01', 1, 2, 3, 4]);
        table.addRow(['2001-01-03', 3, 2, 4, 2]);
        table.addRow(['2001-01-04', 2, 2, 4, 2]);
        table.addRow(['2001-01-05', 0, 1, 4, 5]);
        table.addRow(['2001-01-06', 9, 2, 6, 8]);
        table.addRow(['2001-01-07', 2, 2, 7, 3]);
        var chart = new google.charts.Bar(this);
        var options = google.charts.Bar.convertOptions({
            isStacked: true,
            series: {
                2: { targetAxisIndex: 1 },
                3: { targetAxisIndex: 1 }
            },
            vAxis: {
              viewWindow: {
                max: 15,
              }   
            }   
        });
        chart.draw(table, options);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="service-usage-graph"></div>
1
Damien Ó Ceallaigh

これはstacked column chartを使用して行うことができます。1つのグループのすべてのデータ系列（たとえば、挽いたコーヒー）が左軸にあり、他のグループのすべてのデータ系列が右軸（インスタントコーヒー）にあります。

データと積み上げ縦棒グラフの設定

enter image description here

一連のグループ2が右軸に移動しました

enter image description here

0
Mark Schiefelbein