将一个堆叠列的谷歌图表变成瀑布图

Turn a stacked column google chart into a waterfall chart

本文关键字：谷歌 布图 一个      更新时间：2023-09-26

我一直在做一个项目，用谷歌图表复制瀑布图。我已经成功地创建了两个系列的堆叠列，其中第一个系列是透明的，所以第二个可见系列似乎是浮动的，就像瀑布图一样。问题是，第一个透明系列仍然是交互式的，并在鼠标悬停时高亮显示，同时显示标签和注释。你能帮我弄清楚如何阻止第一列序列被检测到吗。

我发现有人做到了这一点，但他们没有提到这是如何做到的。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个。

在所需系列上使用选项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']
]);

实时演示

相关文章：