2

这是我的代码：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) 我希望列有不同的颜色 因为我只有一个文件，所以所有这些是相同的颜色。我想知道我是否使用了正确的图表。

建议将不胜感激

非常感谢您的所有回答。我结合了您的解决方案，终于弄清楚了：

最后结果

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

4

2 回答 2

2

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 支持这样的垂直书写。您可以旋转文本以垂直对齐，但这不是您要在此处实现的目标。

于 2013-10-07T14:13:17.723 回答
1

你可以得到你想要的垂直标签，只需一点点小技巧。

我在这里放了一个样本：

结果图像

希望这个回答让你大変満足。

添加空格

您的数据需要每个字符之间有一个空格，以便可以将它们分成单独的行：

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

更改轴显示值

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

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

maxTextLines将允许您的标签被分成多条垂直线。4 在这里可能和 5 一样有效，因为您只有 4 个字符。

slantedText由于某种原因，最终被用于拆分多行。所以我手动关闭了它。

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

minTextSpacing确保即使您的线条只有一个字符宽，图表也会被愚弄以为它需要添加换行符。

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

调整图表高度

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

や
や
…

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

于 2013-10-08T00:25:02.447 回答