烛台总是在组合图表谷歌图表的顶部

Question

我正在使用谷歌图表，并且对API非常新，现在最有可能适用于我的要求的是Combo Chart，这个图表非常好用，但只有一件事情非常奇怪，

当我尝试使用烛台线时，无论哪个位于series而另一个位于seriesType烛台总是位于线上，是否有解决此问题的方法？

修改

我想要做的是我有一些OHLC数据，我想画一个烛台图表或OHLC图表任何可行的，然后我想在它上面画一条趋势线。

我目前没有相应的图像，但它可能看起来像这样

我只是想说，我没有坚持使用google api，如果你有任何其他能够做到这一点的api请转介给我，但当然是免费的api。

如果api让我画出我想要的东西会更好。

我选择google api，因为它已经完成并受到支持。

Answer 1

可以使用combo chart完成此操作。

以下是示例代码：

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月的this ticket。

如果您需要使用ComboChart，可能会有一些解决方法，但您很可能不喜欢它们。

选项1：创建自定义javascript

您可以修改Google Visualization使用javascript创建的svg。根据{{​​3}}，您可以通过在SVG中移动其顺序来更改元素的z-index。所以你必须：

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

这显然很令人头痛（特别是如果你看一下像firebug这样的结果图表的svg格式）。

选项2：广告素材CSS

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

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

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

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

确保顶部图表是透明的，图表，图例或其他图表垃圾不会在图表中重复。

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

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

这会影响性能，因为您正在渲染两个图表，并且透明背景在某些版本的IE上不起作用。它还意味着对实际图表代码的更多工作，因为你必须排列图表并确保它不会中断，具体取决于你如何更改数据。

3）最简单的选项：使用烛台图表

您也可以使用this question执行此操作。它可能比ComboChart更有限，但它确实允许你把'棒'放在'棒'前面。