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.

回答1:

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

来源：https://stackoverflow.com/questions/29409613/turn-a-stacked-column-google-chart-into-a-waterfall-chart

标签

javascript

charts

google-visualization