javascript - Google 图表 API 设置选择 选择要突出显示的系列

Question

使用 Google Charts API [https://developers.google.com/chart/interactive/docs/events] 我有一个格式正确的 ComboChart 和一个格式正确的 Google 呈现的数据表。

我可以使用 setSelection() 函数 - 但是，选择突出显示了穿过条形图中间的平均线。

我无法弄清楚如何使图表/图形区域上突出显示的“点”出现在其他系列/数据集上(例如突出显示条形图而不是平均线 - 根据任何平均值，这是一个穿过中间的直线对我的最终用户来说没有任何意义)。

如果您愿意，我可以向 JS fiddle 添加一些代码，但这实际上只是一个基本的谷歌组合图表，显示几个不同的条形图作为我的主要数据集，以及一条平均线作为我的系列“1”(基数为 0)。

编辑:添加js fiddle :http://jsfiddle.net/GSryX/

[code]
some code
[/code]

有什么想法吗？

Answer 1

设置选择时，请确保所选对象的“列”参数引用数据表中的正确列。

编辑:

如果条形太小而无法显示选择效果，您可以使用像这样的 hack http://jsfiddle.net/asgallant/5SX8w/更改选择时的条形颜色。当您只有 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();
}