这可以通过组合图.
这是示例代码:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Dummy');
data.addColumn('number', 'Range');
data.addColumn({type: 'number', role: 'interval'});
data.addColumn({type: 'number', role: 'interval'});
data.addColumn('number', 'Trend');
data.addRows([
['Mon', 28, 10, -8, 17, 42.8],
['Tue', 38, 17, -7, 28, 47.5],
['Wed', 55, 22, -5, 25, 52.2],
['Thu', 66, 11, -16, 11, 56.9],
['Fri', 22, 44, -7, 44, 61.6],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
isStacked: true,
seriesType: "bars",
series: {0: {color: 'transparent'}, 2: {type: "line"}}
});
}
这是结果:
根据需要进行调整(如果需要,可结合以下策略)。
下面预先编辑答案
目前 Google Visualization API 不支持 z-index。看这张票从 2012 年 4 月开始。
如果您需要使用组合图,有一些潜在的解决方法,但您很可能不喜欢它们。
选项 1:创建自定义 JavaScript
您可以编辑svg
Google Visualization 使用 JavaScript 创建的。根据这个问题您可以通过在 SVG 中向上移动元素的顺序来更改元素的 z 索引。所以你必须:
- 找到代表烛台元素的 svg
- 找出您想要的最后一个项目在哪里
- 将烛台元素移到 svg 中该项目的后面
这显然是一个令人头疼的问题(特别是如果你在像 firebug 这样的东西中查看结果图表的 svg 格式)。
选项 2:创意 CSS
这实现起来比较简单,但有其自身的一系列缺陷(性能、跨浏览器的兼容性等)。
创建两张图表,一张仅包含蜡烛图,一张包含条形图和蜡烛图。
确保每个图表的比例相同。
使用 CSS Z-index 将带有烛台的图表放在另一个图表下方。
确保顶部图表是透明的,并且图表中没有重复的标签、图例或其他图表垃圾。
在顶部图表上,使烛台条不可见(您希望它们在那里以便显示条的值,但您不希望看到它们,因为它们位于顶部)。有很多方法可以做到这一点(使线宽为 0、使颜色透明或诸如此类)。
在顶部图表上创建一个事件,该事件链接鼠标悬停事件以选择底部图表上的相同系列,以便用户看起来就像有一个图表(因为它们都作为一个图表交互)。
这会损害性能,因为您正在渲染两个图表,并且透明背景在某些版本的 IE 上不起作用。它还意味着在实际图表代码上需要做更多的工作,因为您必须排列图表并确保它不会根据您更改数据的方式而中断。
3) 最简单的选择:使用烛台图
您可以使用烛台图以及。它可能比组合图有更多限制,但它确实允许您将“条”按原样放在“棒”前面。