Javascript 如何使用GoogleCharts绘制具有一个字段和多种颜色的柱状图

这是我的密码：

load（“可视化”、“1”、{packages:[“corechart”]}）；
函数drawColumnChart（容器、数据）{
var data=google.visualization.arrayToDataTable（数据）；
var chart=新的google.visualization.ColumnChart（容器）；
var选项={fontSize:16}；
图表绘制（数据、选项）；
}
$（文档）.ready（函数（）{
drawColumnChart（$（“#满意度条形图”）[0][
[“满意度”、“百分比”]，
['大変満足',          10      ],
['満足',            22      ],
['やや満足',          30      ],
['やや不満',          10      ],
['不満',            5       ]
]);
});

这就是我真正想要的：

我有两个问题：

（1） 我希望x轴下方的文本与上下对齐 我已浏览了，但找不到选项 （2） 我希望这些列有不同的颜色 因为我只有一个文件，所以所有的文件都是相同的颜色。我想知道我是否使用了正确的图表

如有任何建议，将不胜感激

非常感谢你的回答。我结合了您的解决方案，最终找到了解决方案：

---

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

谷歌可视化API的ColumnCharts颜色数据按系列排列，因此，如果您希望条形图有多种颜色，您必须将它们分成不同的系列。
函数drawColumnChart（容器、数据）{
var data=google.visualization.arrayToDataTable（数据）

var列=[0]；
对于（var i=0；i

下面是这段代码的一部分：

---

我认为可视化API不支持这样的垂直书写。您可以旋转文本使其垂直对齐，但这并不是您在此尝试实现的目的。

您可以通过一点欺骗获得想要的垂直标签

我举了一个例子：

我希望这个答案能让你满意大変満足.

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

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

更改轴显示值 对于

hAxis

，您需要设置以下选项：

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

maxTextLines

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

由于某种原因，

slidedtext

最终被用于拆分多行。所以我手动关闭了它

showTextEvery

通过仅显示轴标签的子集，防止在一行上显示水平标签

minTextSpacing

确保即使行宽为一个字符，图表也会误以为需要添加换行符

maxAlternation

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

调整图表的高度 如果将图表高度保留为默认值，则只有两行标签的空间，因此最终的标签显示

や
や
…

---

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

height

属性。

这里的缺点是有5个图例，或者没有图例。但我想这是一种“理智”的方式——在谷歌论坛上看到你帮了大忙！：）+1…如何为每个条强制使用某些颜色？您可以设置

颜色

选项来设置颜色，也可以设置

系列。投票+1:）聪明的技巧，非常感谢您的详细解释，这让我非常高兴大変満足 :)日语和谷歌可视化？我完全明白了。我希望这与你的另一个技巧相结合时对你有效。
maxTextLines: 5,
slantedText: false,
showTextEvery: 1,
minTextSpacing: 40,
maxAlternation: 1

や
や
…