Google Charts API集選擇選擇系列以突出顯示

Question

使用Google Charts API [https://developers.google.com/chart/interactive/docs/events]，我具有格式正確的ComboChart和格式正確的Google呈現的數據表。

我可以使用setSelection（）函數-但是，選擇突出顯示了穿過條形圖中間的平均線。

我無法弄清楚如何使圖表/圖形區域上突出顯示的“點”出現在其他系列/數據集上（例如，突出顯示條而不是平均線-根據任何平均值，這是一條直線中間對我的最終用戶而言毫無意義）。

如果您願意，我可以向JS小提琴中添加一些代碼，但這實際上只是一個基本的Google組合圖，顯示幾個不同的條形作為我的主要數據集，一條平均線顯示為我的系列“ 1”（基數為0）。

編輯：添加js小提琴： http : //jsfiddle.net/GSryX/

[code]
some code
[/code]

有任何想法嗎？

Answer 1

設置選擇時，請確保所選對象的“ column”參數引用了DataTable中的正確列。

編輯：

如果條形太小而無法顯示選擇效果，則可以改用http://jsfiddle.net/asgallant/5SX8w/這樣的hack來更改選擇條形。 當您只有1系列數據時，這種方法效果最好。 如果您有1個以上的序列，則需要對其進行修改，除非您使用堆疊的條形，否則可能無法正確顯示。

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();
}