Google Chart Javascript APIを使用して、このような棒グラフを中央に配置する方法はありますか?Google Chart Example? Google Chartsのファンネルグラフをエミュレートしたいと思います。 Google Chartsでは、漏斗タイプのグラフはサポートされていません。Google Chart BarChartの中央に配置された棒グラフですか?
3
A
答えて
9
はい可能です。基本的に、この例では基本的な棒グラフ(http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html)を作成しています。この「ファンネル」効果を得るには、スタックチャートを作成します(javascriptではisStackedプロパティを参照)。最初の要素は白色になり、次の要素はオレンジ色になります。
色のプロパティchco = ffffff、FF9900をたとえばchco = aaaaaa、FF9900に変更すると、これを見ることができます。
http://chart.apis.google.com/chart?cht=bhs&chco=aaaaaa,FF9900&chxt=x,x,y&chxl=1:|Percentage%20converting|2:|Step%206|Step%205|Step%204|Step%203|Step%202|Step%201&chxp=1,50|3,50&chd=t:0,12.5,28,29,35.5,48.5|100,75,44,42,29,3&chbh=a&chs=800x230&chm=N **%、000000,1、-1,11、& CHDの= 0100
C次に、あなたはそれが本当に、グラフの新しい種類ではない基本的な積み上げグラフだし、ということがわかります。
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Invisible', 10, 20, 30, 40],
['Visible', 80, 60, 40, 20]];
var years = ["Step1", "Step2", "Step3", "Step4"];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(years.length);
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
colors: ['ffffff','aaaaaa'],
vAxis: {title: "Year"},
hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true}
);
}
関連する問題
- 1. Microsoft Chart、棒グラフ
- 2. google chart-wrapperを使用した縦棒グラフの範囲
- 3. タブの中央に配置されたテキストを折り返す
- 4. ページの中央にあるテキストを中央に中央に配置
- 5. 中立の棒グラフ
- 6. jQueryダイアログは常に中央に配置されます
- 7. コアプロットとダイナミックデータを使用してグラフを中央に配置する方法
- 8. Jqueryで要素を中央に配置
- 9. Silverlight Toolkit chart:棒グラフと線グラフの複数のシリーズ
- 10. Googleグラフ:棒グラフのラベルが逆になっています
- 11. ブートストラップポップオーバーが中央に配置されています
- 12. フルスクリーンのVideoViewは中央に配置されていません
- 13. UIImageViewは回転後に中央に配置されません
- 14. JPanelをJFrameの中央に配置
- 15. imageViewのレイヤーを中央に配置
- 16. JPanelのJCheckBoxを中央に配置
- 17. ズームレイヤーをスプライトの中央に配置
- 18. gwtポップアップが中央に配置されていません
- 19. HTM/CSS - スティッキングフッタが中央に配置されていません
- 20. Nivoスライダが中央に配置されていない
- 21. NSArrayControllerにバインドされたコアプロット棒グラフ
- 22. GoogleマップV3マーカーが画面の中央に配置されていて、ジオロケーションに配置されていないのはなぜですか?
- 23. タップされたときにUICollectionViewを中央に配置する方法は?
- 24. Googleグラフ - 棒グラフの棒の向きの変更
- 25. 画面中央にパネルを配置
- 26. 画像を中央に配置
- 27. タグの中央に置かれたテキストのIE位置
- 28. Google棒グラフで個々の棒の色を変更できない
- 29. Eclipseでカーソルをウィンドウの中央に配置しますか?
- 30. 背景画像のビューポートは中央に配置されていますか?
ああ:
次のコードは、これを実行する方法を示しています!卑劣な!ありがとう – kavun