将堆叠列google chart转换为瀑布图 [英] Turn a stacked column google chart into a waterfall chart

问题描述

我一直在使用一个项目来复制瀑布图，使用谷歌图表。我设法有2系列的堆叠列，其中第一个系列是透明的，所以第二个可见系列似乎是浮动的，就像瀑布图一样。问题是，第一个透明系列保持互动和突出显示在鼠标悬停，显示标签和注释。你能帮我找出如何停止检测到的第一列系列。

我发现有人完成了这个，但他们没有提到这是如何做到的。 http://data-ink.com/?p=612 。

这是代码的数据部分：

  var data = google.visualization。 arrayToDataTable（[
 ['Genre'，'Label1'，{role：'annotation'，role：'style'}，'Label2'，{role：'annotation'，role：'style'}] b $ b ['column1'，5，'opacity：0.2'，11，'opacity：0.2']，
 ['column2'，5，'opacity：0.2'，12，'opacity：0.2' ，
 ['column3'，5，'opacity：0.2'，13，'opacity：0.2']，
 ['column4'，5，'opacity：0.2' ']，
 ['column5'，5，'opacity：0.2'，15，'opacity：0.2']，
 ['column6'，5，'opacity：0.2' ：0.2'] 
]）; 
  

这里是 jsFiddle 由R3tep友好提供，回答我的不透明度问题。

使用选项 enableInteractivity：false

/ code>。

 系列：{0：{enableInteractivity：false}} //系列0是数组声明中的第一个序列
  

并将不透明度设置为零：

  var data = google.visualization.arrayToDataTable（[
 ['Genre'，'Label1'，{
 role：'annotation '，
 role：'style'
}，'Label2'，{
 role：'annotation'，
 role：'style'
}]，
 ['column1'，5，'opacity：0'，11，'opacity：0.2']，
 ['column2'，5，'opacity：0'，12，'opacity： 
 ['column3'，5，'opacity：0'，13，'opacity：0.2']，
 ['column4'，5，'opacity：0'，14，'opacity： ]，
 ['column5'，5，'opacity：0'，15，'opacity：0.2']，
 ['column6'，5，'opacity： 0.2'] 
]）; 
  

现场演示

I've been working on a project to replicate a waterfall chart with the use of google charts. I've managed to have 2 series of stacked columns where the first series is transparent so the second visible series seem to be floating, just as a waterfall chart would look like. The problem is that the first transparent series remains interactive and highlights on a mouse hover, with labels and annotations showing up. Can you help me figure out how to stop the first column series being detected.

I've found someone who has accomplished this but they do not mention how this has been done. http://data-ink.com/?p=612.

Here is the data section of the code:

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' } ],
    ['column1', 5,  'opacity: 0.2', 11,  'opacity: 0.2'],
    ['column2', 5,  'opacity: 0.2', 12,  'opacity: 0.2'],
    ['column3', 5,  'opacity: 0.2', 13,  'opacity: 0.2'],
    ['column4', 5,  'opacity: 0.2', 14,  'opacity: 0.2'],
    ['column5', 5,  'opacity: 0.2', 15,  'opacity: 0.2'],
    ['column6', 5,  'opacity: 0.2', 26,  'opacity: 0.2']
]);

Here is jsFiddle kindly provided by R3tep who answered my opacity question. Please note i've since reduced 3 series to 2.

解决方案

Use the option enableInteractivity: false on the desired series.

series:{0: {enableInteractivity: false}} // Serie 0 is the first serie in your array declaration

And set the opacity to zero :

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', {
        role: 'annotation',
        role: 'style'
    }, 'Label2', {
        role: 'annotation',
        role: 'style'
    }],
    ['column1', 5, 'opacity: 0', 11, 'opacity: 0.2'],
    ['column2', 5, 'opacity: 0', 12, 'opacity: 0.2'],
    ['column3', 5, 'opacity: 0', 13, 'opacity: 0.2'],
    ['column4', 5, 'opacity: 0', 14, 'opacity: 0.2'],
    ['column5', 5, 'opacity: 0', 15, 'opacity: 0.2'],
    ['column6', 5, 'opacity: 0', 26, 'opacity: 0.2']
]);

Live demo

这篇关于将堆叠列google chart转换为瀑布图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！