选项1：创建自定义javascript

Question

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

  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}}
  });
}

请参阅此处的小提琴 - http://jsfiddle.net/MeS2N/

Answer 1

不幸的是，无法控制Google图表中各个元素的z-index。

我试过了：

使条形系列在数据中排在最后
将条形系列移动到轴2
将其他系列移至轴2

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

有一个问题已经打开，要求添加此功能in April, 2012，但尚未解决。

与此同时，您可以使用this question中的广告素材解决方案：

选项1：创建自定义javascript

您可以修改Google Visualization创建的svg   JavaScript的。根据{{3}}   您可以通过在中移动订单来更改元素的z-index   SVG。所以你必须：


找到代表烛台元素的svg

找出您想要的最后一项是

在svg
中移动该项目后面的烛台元素
这显然很头疼（特别是如果你看看svg   将结果图表格式化为类似firebug的内容。

选项2：广告素材CSS

实现起来有点简单，但有一些陷阱   （性能，跨浏览器的兼容性等）。

创建两个图表，一个只用烛台，一个用吧   和烛台。

确保每张图表的比例相同。

使用CSS Z-index将图表与烛台下方的烛台放在一起   其他图表。

确保顶部图表是透明的，没有标签，   传说，或其他图表垃圾在图表中重复。

在顶部图表上，使烛台栏不可见（您想要它们   这样就显示了条形的值，但你不想要   看到他们，因为他们在顶部）。有很多方法可以做到这一点   （使线宽为0，使颜色透明，或者其他东西   那种。）

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

这会损害性能，因为你正在渲染两个图表，而且   透明背景不适用于某些版本的IE。它也是   对于实际的图表代码意味着更多的工作，因为你必须这样做   排列图表并确保它不会破坏，具体取决于方式   你改变了数据。

（只需根据需要将对“烛台”的引用更改为“区域” - 概念是相同的）

谷歌图表 - 显示区域背后

1 个答案:

选项1：创建自定义javascript

选项2：广告素材CSS