这里一个单场和多颜色是我的代码：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

希望这可以帮助任何人谁通过一系列符合同样的问题

来源

2013-10-07 wander

的谷歌可视化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] 
    ]); 
}});

下面是这段代码的的jsfiddle：http://jsfiddle.net/asgallant/Rrhak/

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

来源

2013-10-07 14:13:17 asgallant

这里的缺点是5个传说 - 或没有传说。但我认为这是“理智”的方式，在Google论坛中你看到了很多帮助！ :) +1 ...你如何强制每个酒吧的某些颜色？ – davidkonrad

您可以设置'colors'选项来设置颜色，或者您可以设置'series。 asgallant

的最佳解决方案，非常感谢您的回答 – wander

你可以通过一些想法获得想要的垂直标签。

我把样品here：

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

添加空格

你的数据需要与它之间的空间中每个人物，使他们能够在以不同的线被打破了：

['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-08 00:25:02 jmac

投票+1 :)聪明的把戏，非常感谢您的详细解释，这真的让我大変満足:) – wander

日本和谷歌可视化？我全都结束了。我希望这与你的另一个诀窍相结合时适合你。 – jmac

如何绘制柱形图使用谷歌图表

回答

添加空格

改变轴线显示值

调整图表

相关问题