如何使用Google圖表繪制具有一個字段和多種顏色的柱形圖

Question

這是我的代碼： jsfiddle

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawColumnChart(container, data) {    
    var data = google.visualization.arrayToDataTable(data);
    var chart = new google.visualization.ColumnChart(container);
    var options = {fontSize: 16};
    chart.draw(data, options);
  }
$(document).ready(function(){
    drawColumnChart($("#satisfactionBarGraph")[0], [
        ['satisfaction', 'percent'],
        ['大変満足',          10      ],
        ['満足',            22      ],
        ['やや満足',          30      ],
        ['やや不満',          10      ],
        ['不満',            5       ]
    ]);
});
</script>
</head>
<body>
<div id="satisfactionBarGraph" style="width: 524px; height: 370px;" class="chartContainer"></div>
</body>
</html>

這就是我真正想要的： 在此處輸入圖片說明

我有兩個問題：

（1）我希望x軸下方的文本與文檔的頂部底部對齊。但是我找不到該選項（2）我希望這些列使用不同的顏色，因為我只提交了一個，所以全部是相同的顏色。 我想知道我是否使用了正確的圖表。

和建議將不勝感激

非常感謝您的所有回答。 我結合了您的解決方案，最后弄清楚了：

最后結果

希望這可以幫助遇到相同問題的任何人

Answer 1

Google Visualization API的ColumnCharts按系列顯示顏色數據，因此，如果您希望條形有多種顏色，則必須將它們分成不同的系列。
函數drawColumnChart（容器，數據）{
var data = google.visualization.arrayToDataTable（data）;

    var columns = [0];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        columns.push({
            type: 'number',
            label: data.getColumnLabel(1),
            calc: (function (x) {
                return function (dt, row) {
                    return (row == x) ? dt.getValue(row, 1) : null;
                }
            })(i)
        });
    }
    var view = new google.visualization.DataView(data);
    view.setColumns(columns);

    var chart = new google.visualization.ColumnChart(container);
    var options = {
        fontSize: 16,
        // set the "isStacked" option to true to make the column spacing work
        isStacked: true
    };
    chart.draw(view, options);
}
// use the callback from the google loader to draw the chart rather than document ready
google.load("visualization", "1", {packages:["corechart"], callback: function () {
    drawColumnChart($("#satisfactionBarGraph")[0], [
        ['satisfaction', 'percent'],
        ['大変満足', 10],
        ['満足', 22],
        ['やや満足', 30],
        ['やや不満', 10],
        ['不満', 5]
    ]);
}});

這是此代碼的jsfiddle： http : //jsfiddle.net/asgallant/Rrhak/

我不認為Visualization API支持這種垂直書寫。 您可以旋轉文本以使其垂直對齊，但這不是您要在此處實現的目標。

Answer 2

您可以通過一點點修飾來獲得所需的垂直標簽。

我在這里放了一個樣本：

希望這個答案能使您大変満足。

添加空間

您的數據需要每個字符之間都有一個空格，以便可以將它們分解為單獨的行：

    ['satisfaction', 'percent'],
    ['大 変 満 足',       10      ],
    ['満 足',           22      ],
    ['や や 満 足',       30      ],
    ['や や 不 満',       10      ],
    ['不 満',           5       ]

更改軸顯示值

對於hAxis您需要設置以下選項：

maxTextLines: 5,
slantedText: false,
showTextEvery: 1,
minTextSpacing: 40,
maxAlternation: 1

maxTextLines可以將標簽分成多條垂直線。 因為您只有4個字符，所以這里4和5可能一樣有效。

出於某種原因， slantedText最終被用於多行拆分。 所以我手動將其關閉。

showTextEvery通過僅顯示一部分軸標簽showTextEvery防止它在一行上顯示水平標簽。

minTextSpacing確保即使您的行是一個字符寬，圖表也會被欺騙以為它需要添加換行符。

maxAlternation防止您具有兩個“級別”的標簽，以使它們全部與軸對齊。

調整圖表高度

如果您將圖表高度保留為默認值，則只能有兩行標簽的空間，因此最終會顯示以下標簽：

や
や
…

為防止這種情況，您需要人為地增加圖表的高度。 有十二種方法可以做到這一點，我只是手動設置height屬性。

如何使用Google圖表繪制具有一個字段和多種顏色的柱形圖

問題描述

2 個解決方案

解決方案1
2 2013-10-07 14:13:17

解決方案2
1 2013-10-08 00:25:02

添加空間

更改軸顯示值

調整圖表高度

如何使用Google圖表繪制具有一個字段和多種顏色的柱形圖

問題描述

2 個解決方案

解決方案1 2 2013-10-07 14:13:17

解決方案2 1 2013-10-08 00:25:02

添加空間

更改軸顯示值

調整圖表高度

解決方案1
2 2013-10-07 14:13:17

解決方案2
1 2013-10-08 00:25:02