Google图表API集合选择要突出显示的系列

Google charts API set selection choose series to highlight

本文关键字：显示 系列 图表 API 集合 选择 Google      更新时间：2023-09-26

使用Google图表API[https://developers.google.com/chart/interactive/docs/events]我有一个格式正确的ComboChart和一个格式适当的谷歌渲染数据表。

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

我不知道如何使图表/图形区域上突出显示的"点"出现在其他系列/数据集上（例如，突出显示条形图而不是平均线——根据任何平均值，这是一条穿过中间的直线，对我的最终用户来说毫无意义）。

如果你愿意，我可以在JS fiddle中添加一些代码，但它实际上只是一个基本的谷歌组合图，显示几个不同的条形图作为我的主数据集，显示一条平均线作为我的系列"1"（基数为0）。

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

[code]
some code
[/code]

有什么想法吗？

设置选择时，请确保所选对象的"column"参数指向DataTable中的正确列。

编辑：

如果条形图太小，无法显示选择效果，您可以使用这样的方法http://jsfiddle.net/asgallant/5SX8w/以更改所选内容的条形图颜色。当您只有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();
}
相关文章：