简体   繁体   中英

Turn a stacked column google chart into a waterfall chart

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM