0

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

  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/

4

1 回答 1

1

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

我试过了：

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

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

有一个问题要求在 2012 年 4 月添加此功能，但尚未解决。

同时，您可以使用此问题的创造性解决方案：

选项 1：创建自定义 javascript

您可以编辑svgGoogle Visualization 使用 javascript 创建的内容。根据这个问题 ，您可以通过在 SVG 中向上移动元素的顺序来更改元素的 z-index。所以你必须：

  1. 找到代表烛台元素的 svg
  2. 找出你想要的最后一个项目在哪里
  3. 将烛台元素移动到 svg 中该项目的后面

这显然是一个令人头疼的问题（特别是如果您以类似 firebug 的方式查看生成图表的 svg 格式）。

选项 2：创意 CSS

这实现起来有点简单，但有自己的一组缺陷（性能、跨浏览器的兼容性等）。

创建两张图表，一张只包含烛台，一张包含条形图和烛台。

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

使用 CSS Z-index 将带有烛台的图表放在另一个图表下方。

确保顶部图表是透明的，并且没有任何标签、图例或其他图表垃圾在图表中重复。

在顶部图表上，使烛台条不可见（您希望它们在那里以便显示条的值，但您不想看到它们，因为它们在顶部）。有很多方法可以做到这一点（使线宽为 0，使颜色透明，或类似的东西）。

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

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

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

于 2013-05-31T00:39:16.430 回答