Javascript 如何在堆栈中创建具有不同颜色和自定义工具提示的堆叠柱形图？

我正在尝试使用谷歌可视化创建一个每列有两个系列的堆叠柱形图。基本上，我展示了一些油箱的数据，每列的下半部分显示了油箱中当前容积的信息，上半部分显示了油箱剩余容积的信息

我希望能够为每个列的两个部分分别设置颜色和工具提示，但我一直无法找到解决方案。以下是我当前的示例：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart', 'controls']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','Element');
data.addColumn('number', 'FillRate');
data.addColumn('number', 'PotentialFill');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow(['Tank1', 60, 40, "blue", "Some tooltip"]);

var chartchart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart0',
dataTable: data,
view: { columns: [0,1,2,3,4],  },
options: {
title: 'Tanks', tooltip: { isHtml: true }, legend: 'none', vAxis: { textPosition: 'out', title: '% Filled', maxValue: 100, minValue: 0 }, hAxis: { textPosition: 'out', title: 'Tanks' }, isStacked: true
}});
chartchart0.draw();    }
</script>

setOnLoadCallback（drawDashboard）；
函数drawDashboard（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Element'）；
data.addColumn（'number'，'FillRate'）；
data.addColumn（'number'，'PotentialFill'）；
addColumn（{type:'string'，role:'style'}）；
addColumn（{type:'string'，role:'tooltip'}）；
addRow（['Tank1'，60，40，“蓝色”，“一些工具提示]）；
var chart0=新的google.visualization.ChartWrapper({
chartType:“ColumnChart”，
集装箱运输：“chart0”，
数据表：数据，
视图：{列：[0,1,2,3,4]，}，
选项：{
标题：'Tanks'，工具提示：{isHtml:true}，图例：'none'，变量：{textPosition:'out'，标题：'Filled'，maxValue:100，minValue:0}，hAxis:{textPosition:'out'，标题：'Tanks'}，isStacked:true
}});
chart0.draw（）；}

---

我已尝试设置两个样式列，但它似乎只影响每列的顶部。

您可以通过为其他工具提示和样式添加更多列，并删除选项中的

视图：

设置来获得所需的结果

这是一把看起来像你想要的小提琴， 和下面的代码

google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','Element');
data.addColumn('number', 'FillRate');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'PotentialFill');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow(['Tank1', 60,  "color:green", "Filled up",40, "color:blue", "could be filled"]);

var chartchart0 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart0',
dataTable: data,
options: {
  title: 'Tanks',
  tooltip: { isHtml: true },
  legend: 'none', 
  vAxis: {        textPosition: 'out', title: '% Filled', maxValue: 100, minValue: 0 },
  hAxis: { textPosition: 'out', title: 'Tanks' },
  isStacked: true
}
});
chartchart0.draw();    }

---

谢谢您的回答，但是当我查看JSFIDLE时，我看到一个红色和绿色的列，而不是代码中预期的红色和蓝色。此外，“可填充”工具提示也不会显示。样式和工具提示似乎只影响列的底部。对不起，对使用小提琴有点陌生。刚刚更新！一旦您选择了自定义工具提示路径，就需要为每个数字列指定自定义工具提示，这似乎非常重要。