###前提・実現したいこと
こちら(↓)の様なグループ化された積み上げ棒グラフを、横棒グラフで実現したいのですが、どうしても実現出来ずにいます。
http://jsfiddle.net/crclayton/v1u1afzn/4/
###発生している問題・エラーメッセージ
縦棒グラフ
var chart = new google.charts.Bar
だと実現出来るのですが、
横棒グラフ
var chart = new google.visualization.BarChart
にすると、各値が全て積み上げられてしまいます。
###該当のソースコード
縦棒グラフのコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5サンプル</title> <!-- グラフ描画 --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBasic); google.charts.setOnLoadCallback(drawBasic2); function drawBasic() { var data = google.visualization.arrayToDataTable([ ['param','A', 'B', 'C'], ['Age01', 50, 10, 35], ['Age02', 40, 20, 10], ['Age03', 60, 25, 10], ]); var options = { isStacked: true, title: 'sample', chartArea: {width: '50%'}, width: 300, height: 450, colors: ['#33FFFF','#ffc0cb','#ff1493'], hAxis: { minValue: 0, maxValue: 100, //最大値の指定 }, //凡例の非表示 legend: { position: "none" }, animation: { //グラフのアニメーション表示 duration: 1000, easing: 'out', //out:早く→ 遅く startup: true }, series: { 1: { targetAxisIndex: 1 }, 2: { targetAxisIndex: 1 }, }, }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
横棒グラフにしたコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5サンプル</title> <!-- グラフ描画 --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBasic); google.charts.setOnLoadCallback(drawBasic2); function drawBasic() { var data = google.visualization.arrayToDataTable([ ['param','A', 'B', 'C'], ['Age01', 50, 10, 35], ['Age02', 40, 20, 10], ['Age03', 60, 25, 10], ]); var options = { isStacked: true, title: 'sample', chartArea: {width: '50%'}, width: 300, height: 450, colors: ['#33FFFF','#ffc0cb','#ff1493'], hAxis: { minValue: 0, maxValue: 100, //最大値の指定 }, //凡例の非表示 legend: { position: "none" }, animation: { //グラフのアニメーション表示 duration: 1000, easing: 'out', //out:早く→ 遅く startup: true }, series: { 1: { targetAxisIndex: 1 }, 2: { targetAxisIndex: 1 }, }, }; var chart = new google.visualization.BarChart(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
ドキュメントを読み切れていないのかも知れませんが、何卒ご助力のほどお願い致します。
回答1件
あなたの回答
tips
プレビュー