添加空格

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>

这就是我真正想要的： enter image description here

我有两个问题：

（1）我希望x轴下面的文字对齐顶部底部我已经浏览了document但找不到该选项（2）我希望列有不同的颜色因为我只有一个字段，所以它们都是相同的颜色。我想知道我是否使用了正确的图表。

建议将不胜感激

非常感谢您的所有答案。我结合你的解决方案，最后想出来了：

final result

希望这可以帮助遇到同样问题的人

Answer 1

Google Visualization API的ColumnCharts按系列颜色数据，因此如果您想要多种颜色的条形图，则必须将它们分成不同的系列。
function drawColumnChart（container，data）{
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]
    ]);
}});

以下是此代码的解释：http://jsfiddle.net/asgallant/Rrhak/

我不认为Visualization API支持这样的垂直书写。您可以将文本旋转为垂直对齐，但这不是您要在此处实现的目标。

Answer 2

你可以通过一点点的方式获得你想要的垂直标签。

我放了一个样本here：

我希望这个答案能让你大変満足。

添加空格

您的数据需要让每个字符之间留有空格，以便将它们拆分为单独的行：

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

更改轴显示值

对于hAxis，您需要设置以下选项：

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

maxTextLines可以将您的标签拆分为多条垂直线。因为你只有4个字符，所以4可能和5一样好。

由于某种原因，

slantedText最终被用于分割多行。所以我手动关掉它。

showTextEvery通过仅显示轴标签的子集来阻止它在一行上显示水平标签。

minTextSpacing确保即使您的行是一个字符宽，图表也会被认为需要添加换行符。

maxAlternation阻止您拥有两个“级别”的标签，以便它们与轴齐平。

调整图表的高度

如果您将图表高度保留为默认值，则只有2行标签的空间，因此最终会出现标注

的标签

や
や
…

为了防止这种情况，您需要人为地增加图表的高度。有十几种方法可以做到这一点，我只需手动设置height属性。

如何使用谷歌图表绘制一个单个字段和多个颜色的柱形图

2 个答案:

添加空格

更改轴显示值

调整图表的高度