2

我正在使用谷歌图表，并且对 API 非常陌生，现在最有可能满足我的要求的是组合图表，这个图表对所有内容都非常好，但只有一件事非常奇怪，

当我尝试带有烛台的线条时，无论哪个在烛台中series，另一个在seriesType烛台中，烛台总是在线条之上，是否有解决此问题的方法？

编辑

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

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

在此处输入图像描述

我只是想说，我并没有被谷歌 api 所束缚，如果你有任何其他能够做到这一点的 api，请向我推荐它，但当然是免费的 api。

如果 api 让我在上面画我想要的东西会更好。

我选择 google api 是因为它完整且受支持。

4

1 回答 1

6

这可以通过组合图来完成。

这是示例代码：

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 月的这张票。

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

选项 1：创建自定义 javascript

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

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

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

选项 2：创意 CSS

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

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

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

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

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

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

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

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

3) 最简单的选择：使用烛台图

您也可以使用烛台图来做到这一点。它可能比 ComboChart 更受限制，但它确实允许您将“条”放在“棒”之前。

于 2013-05-23T00:57:53.407 回答