Google visualization 谷歌可视化API-堆叠条形图-自定义工具提示
我一直在尝试获取堆叠条形图的自定义工具提示Google visualization 谷歌可视化API-堆叠条形图-自定义工具提示,google-visualization,Google Visualization,我一直在尝试获取堆叠条形图的自定义工具提示 var data = new google.visualization.DataTable(); data.addColumn('string', 'Units'); data.addColumn('number', '1'); data.addColumn('number', '2'); data.addColumn('number', '3'); data.addColumn('number', '4'); _1 = 0.123 _2 = 0.2
var data = new google.visualization.DataTable();
data.addColumn('string', 'Units');
data.addColumn('number', '1');
data.addColumn('number', '2');
data.addColumn('number', '3');
data.addColumn('number', '4');
_1 = 0.123
_2 = 0.23
_3 = 0.3
_4 = 0
data.addRow([_units, _1, _2, _3, _4,]);
var options = {
isStacked: true,
height: 150,
chartArea: { height: 50 },
legend: { position: 'top' },
};
bchart = new google.visualization.BarChart(bcontainer);
bchart.draw(data, options);
那么,我的问题是如何为以下每一项创建工具提示:_1、_2、_3、_4
谢谢下面的谷歌文档中介绍了这一点 在条形图文档中,它解释了哪些角色可用于该图表 您需要做的是向数据中添加{role:tooltip}附加列,该列显示您希望工具提示显示的内容 例如:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Expenses');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'],
['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
]);
最终代码如下所示:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Expenses');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'],
['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
isStacked: true,
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Sales"}}
);
}
请看一个例子。我昨天花了几个小时试图弄明白这一点。非常感谢你。