Google visualization 谷歌图表-后面的显示区域

我有一个图表，它显示一个列系列和两个区域系列（堆叠）。 我希望这些区域显示在列后面。这可能吗

  var data = google.visualization.arrayToDataTable([
    ['Day', 'Actual', 'Base','Uplift'],
    ['2013-05-01',140,100,25],
    ['2013-05-07',75,80,22],
    ['2013-05-14',130,105,10],
    ['2013-05-21',110,75,18],
    ['2013-05-28',205,140,25]
  ]);


  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('chart'));
 ac.draw(data, {
    width: 600,
   fontSize:10,
    height: 400,
    colors:['rgb(146,208,80)','rgb(0,112,192)','rgb(184,204,228)'],
    vAxis: { minValue: 0},
    hAxis: {slantedTextAngle: 45},
    seriesType: "bars",
    isStacked:true,
   series: {0:{type:"bars"},1: {type: "area", areaOpacity:.7}, 2: {type: "area", areaOpactiy:1}}
  });
}

---

请参见此处的fiddle-

不幸的是，无法控制Google图表中单个元素的z索引

我试过：

使条形图系列在数据中排在最后

将杆系移动到轴2

将其他系列移动到轴2

所有这些都没有改变在生成的SVG中将条写在前面的事实

有一个问题要求添加此功能，但尚未解决

同时，您可以使用以下创造性解决方案：

选项1：创建自定义javascript 您可以编辑Google Visualization使用的

svg

javascript。根据 您可以通过在中向上移动元素的顺序来更改元素的z索引 SVG。所以你必须：

查找表示烛台元素的svg

找出你最后想要的东西在哪里

将烛台元素移动到svg中该项目的后面

这显然是一个令人头痛的问题（特别是当您查看svg时） 用类似firebug的方式格式化生成的图表）

选项2：创造性CSS 这是一个更简单的实现，但有自己的陷阱集 （性能、跨浏览器的兼容性等）

创建两个图表，一个只有烛台，一个有条形图 还有烛台

确保每个图表的比例相同

使用CSS Z索引将带有烛台的图表放在 其他图表

确保顶部的图表是透明的，与标签不同， 图例或其他图表垃圾会在图表中复制

在顶部图表上，使烛台条不可见（您需要它们） 这样可以显示条的值，但您不希望 将他们视为处于顶端）。有很多方法可以做到这一点 （使线宽为0，使颜色透明，或其他 类似的）

在顶部图表上创建一个事件，将鼠标悬停事件链接到 在底部图表上选择相同的系列，使其看起来 像您这样的用户有一个图表（因为它们都作为一个图表进行交互）

这将影响性能，因为您正在渲染两个图表，并且 透明背景在某些版本的IE上不起作用。它也 这意味着在实际的图表代码上要做更多的工作，因为您必须 把图表排成一行，确保它不会因为什么方式而破裂 您可以更改数据

---

（只需根据需要将“烛台”改为“区域”——概念相同）

感谢您的努力。这太令人失望了！我将研究这些选项，但我可能会发现使用一个替代的报告包更容易一些，它以本机方式处理此问题。