Googleチャートをいくつか作成していますが、ここで行き詰まっています。 Googleでは、列を積み重ねることができます。ただし、制限があるか、機能するように構成できません。グーグルから取られた、これは2つの国のために毎年生産されたコーヒーのカップの数を示す例です:
たとえば、同じ2か国について別のデータセットがあるとしますが、今回は挽いたものではなくインスタントコーヒーを使用しています。例:
私がしたいことは、これらの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]
のようなものを生成する
よろしくお願いします。
今日同じ問題に遭遇し、あなたの提出リンクをたどっただけです。最近誰かがこれで答えたようです:
「これは新しいマテリアルバーチャートで実際に可能です(多少ラウンドアバウトな方法ですが)。新しいチャートで、チャートを積み上げて、別の軸に系列を配置すると、それらの系列に個別のスタックが作成されます。残念ながら、現時点ではまだ完全に軸を非表示にする方法はなく、ビューウィンドウを明示的に設定する必要があります。最終的には、軸を非表示にし、ビューウィンドウを整列するオプションを導入しますが、これは今のところ必要です。」
このフィドルは、私がこの問題を解決するのに役立つようでした: 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));
};
Visualization APIは、データの行ごとに複数の列スタックを作成することをサポートしていません。必要に応じて 機能リクエスト を作成して、これに対するサポートを追加できます。
ダンホーガンの答えは私に役立ちました。ただし、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>