将堆积柱形 google 图表转换为瀑布图

Question

我一直致力于一个项目，使用 google 图表复制瀑布图。我设法拥有 2 个系列的堆叠柱，其中第一个系列是透明的，因此第二个可见系列似乎是浮动的，就像瀑布图一样。问题是第一个透明系列在鼠标悬停时保持交互并突出显示，并显示标签和注释。你能帮我弄清楚如何停止检测到第一列系列吗？

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

这里是代码的数据部分：

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']
]);

这是 R3tep 友情提供的jsFiddle，他回答了我的不透明度问题。请注意，我已经将 3 个系列减少到 2 个。

Answer 1

对所需系列使用选项 enableInteractivity: false。

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

并将不透明度设置为零：

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 图表转换为瀑布图

Turn a stacked column google chart into a waterfall chart

javascript

charts

google-visualization