Google Charts API集选择选择系列以突出显示

Question

Using the Google Charts API [https://developers.google.com/chart/interactive/docs/events] I have a properly formatted ComboChart and a properly formatted google rendered data table.

I am able to use the setSelection() function - However, the selection is highlighting my average line which runs through the middle of the bar chart.

I am unable to work out how to make the highlighted 'dot' on the chart/graph area appear on the other series/data set (eg highlight the bars instead of the average line - which as per any average, is a straight line through the middle which means nothing to my end user).

I can add some code to a JS fiddle if you wish but it's really just a basic google combo chart displaying several different bars as my main data set and an average line as my series '1' (with base 0).

Edit: add js fiddle: http://jsfiddle.net/GSryX/

[code]
some code
[/code]

Any ideas?

Answer 1

When setting the selection, make sure the "column" parameter of the selected object refers to the correct column in your DataTable.

Edit:

If the bars are too small to show the selection effect, you can instead use a hack like this http://jsfiddle.net/asgallant/5SX8w/ to change the bar color on selection. This works best when you have only 1 series of data; if you have more than 1 series, it requires modification, and may not display properly unless you are using stacked bars.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Foo', 94],
        ['Bar', 23],
        ['Baz', 80],
        ['Bat', 47],
        ['Cad', 32],
        ['Qud', 54]
    ]);

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            // setting the "isStacked" option to true fixes the spacing problem
            isStacked: true,
            height: 300,
            width: 600,
            series: {
                1: {
                    // set the color to change to
                    color: '00A0D0',
                    // don't show this in the legend
                    visibleInLegend: false
                }
            }
        }
    });

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getChart().getSelection();
        if (selection.length > 0) {
            var newSelection = [];
            // if row is undefined, we selected the entire series
            // otherwise, just a single element
            if (typeof(selection[0].row) == 'undefined') {
                newSelection.push({
                    column: 2
                });
                chart.setView({
                    columns: [0, {
                        type: 'number',
                        label: data.getColumnLabel(1),
                        calc: function () {
                            // this series is just a placeholder
                            return 0;
                        }
                    }, 1]
                });
            }
            else {
                var rows = [];
                for (var i = 0; i < selection.length; i++) {
                    rows.push(selection[i].row);
                    // move the selected elements to column 2
                    newSelection.push({
                        row: selection[i].row,
                        column: 2
                    });
                }

                // set the view to remove the selected elements from the first series and add them to the second series
                chart.setView({
                    columns: [0, {
                        type: 'number',
                        label: data.getColumnLabel(1),
                        calc: function (dt, row) {
                            return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
                        }
                    }, {
                        type: 'number',
                        label: data.getColumnLabel(1),
                        calc: function (dt, row) {
                            return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
                        }
                    }]
                });
            }
            // re-set the selection when the chart is done drawing
            var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
                google.visualization.events.removeListener(runOnce);
                chart.getChart().setSelection(newSelection);
            });
        }
        else {
            // if nothing is selected, clear the view to draw the base chart
            chart.setView();
        }
        chart.draw();
    });

    chart.draw();
}