烛台总是在组合图谷歌图表的顶部 [英] Candlesticks is always on top of lines in combo chart google chart

问题描述

我使用的是Google图表，并且对API来说是非常新颖的，现在最符合我需求的东西就是。

以下是示例代码：

 函数drawVisualization（）{
 //创建并填充数据表。 
 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]，
]）; 
 
 //创建并绘制可视化文件。 
 var ac = new google.visualization.ComboChart（document.getElementById（'visualization'））; 
 ac.draw（数据，{
标题：'按国家的每月咖啡生产量'，
宽度：600，
身高：400，
 vAxis：{title： Cups}，
 hAxis：{title：Month}，
 isStacked：true，
 seriesType：bars，
 series：{0：{color：'透明'}，2：{type：line}} 
}）; 
} 
  

这是结果：

根据需要进行调整（如果需要，结合下面的策略）。

预编辑下方的答案

<目前，Google可视化API不支持z-index。请参阅2012年4月的此故障单 。

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

选项1：创建自定义javascript

您可以编辑Google Visualization创建的 svg JavaScript的。根据这个问题，您可以通过在SVG中移动它们的顺序来更改元素的Z索引。所以你必须：

1. 找到代表蜡烛元素的svg


2. 找出在哪里
   
3. 将烛台元素移动到svg中的项目后面

这显然是一个令人头疼的问题（特别是如果您查看像firebug这样的结果图表的svg格式）。

选项2：Creative CSS

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

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

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

b
$ b

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

确保顶部图表是透明的，而且没有任何东西像标签，图例或其他图表垃圾在图表中重复出现。

在顶部图表中，使烛形条不可见（您希望它们在那里以显示条形的值，但不希望看到它们，因为它们位于顶部）。有很多方法可以做到这一点（使行宽为0，使颜色变得透明）。

在顶部图表上创建一个事件链接mouseover事件在底部图表上选择相同的系列，这样它就像您有一张图表一样查看用户（因为它们都以一个图表的形式交互）。

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

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

您可以使用烛台图表。它可能比ComboChart更有限，但它确实可以让你把'bars'放在'sticks'前面。

I am using google charts and am very new to the API, now the thing that will most likely work for my requirments is a Combo Chart, this chart is very good with everything but only one thing is very wierd,

When I try Lines with Candlesticks, no matter which one is in series and the other is in seriesType Candlesticks are always ontop of lines, is there any work around for this issue ?

EDIT

What I am trying to do is that I have some OHLC data and I want to draw a candlestick chart or an OHLC chart any will work, and then I want to draw a trendline on top of it.

I currently don't have an Image for that but it might look like this

I just wanted to say also that I am not stuck with the google api, if you any other api that is capable of doing this please refer me to it, but free api of course.

It would better if the api let me draw what I want on it.

I choose the google api because it was complete and supported.

解决方案

This can be done with a combo chart.

Here is sample code:

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

This is the result:

Adjust as needed (combining with the below tactics if needed).

Pre-Edit Answer Below

Currently z-index is not supported for Google Visualization API. See this ticket from April 2012.

If you need to use a ComboChart there are potential workarounds, but there is a good chance you won't like them.

Option 1: Create custom javascript

You can edit the svg that Google Visualization creates with javascript. According to this question you can change the z-index of elements by moving their order up in the SVG. So you'd have to:

1. Find the svg representing the candlestick elements
2. Find out where the last item you want it behind is
3. Move the candlestick elements behind that item in the svg

This is obviously a headache (especially if you look at the svg formatting of the resulting chart in something like firebug).

Option 2: Creative CSS

This is a bit simpler to implement, but has its own set of pitfalls (performance, compatibility across browsers, etc.).

Create two charts, one with just the candlesticks, one with the bars and candlesticks.

Make sure the scales of each chart are the same.

Use the CSS Z-index to put the chart with the candlesticks below the other chart.

Make sure the top chart is transparent, and nothing like labels, legends, or other chart junk is duplicated across the charts.

On the top chart, make the candlestick bars invisible (you want them there so that the values of the bars are displayed, but you don't want to see them as they'd be on top). There are many ways to do this (making the line width 0, making the color transparent, or something of the sort).

Create an event on the top chart that links the mouseover event to select the same series on the bottom chart, so that it looks to the user like you have one chart (since they both interact as one chart).

This will hurt performance because you are rendering two charts, and transparent backgrounds don't work on some version of IE. It also means a lot more work on the actual chart code, because you have to line up the charts and make sure that it won't break depending on how you change the data.

3) Simplest Option: Use the Candlestick Chart

You can do this with the Candlestick Chart as well. It may be a bit more limited than a ComboChart, but it does allow you to put the 'bars' in front of the 'sticks' as it were.

这篇关于烛台总是在组合图谷歌图表的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！