Question

我一直致力于使用谷歌图表复制瀑布图的项目。我设法有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']
]);

这是{3}}由R3tep友情提供，他回答了我的不透明度问题。请注意我将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

将堆叠列谷歌图表转换为瀑布图表

1 个答案: