Google Ligne De La Légende Du Graphique Sur Les Événements

Je veux cacher la ligne graphique lorsque l'utilisateur clique sur la Ligne de légende du Graphique. Est-il possible que je peux le faire dans Google Chart API ? J'ai vu cette fonction sur Highcharts.

OriginalL'auteur user2469096 | 2013-06-09

  1. 3

    Oui c'est possible. Voici un exemple par asgallant:

    function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Foo');
data.addColumn('number', 'Foo');
data.addColumn('number', 'Bar');
data.addColumn('number', 'Bar');
data.addColumn('number', 'Baz');
data.addColumn('number', 'Baz');
data.addRow(['Boston', 5, null, 7, null, 2, null]);
data.addRow(['New York', 4, null, 8, null, 5, null]);
data.addRow(['Baltimore', 6, null, 2, null, 4, null]);
/*  define the series object
*  follows the standard 'series' option parameters, except it has two additonal parameters:
*    hidden: true if the column is currently hidden
*    altColor: changes the color of the legend entry (used to grey out hidden entries)
*/
var series = {
0: {
hidden: false,
visibleInLegend: false,
color: '#FF0000'
},
1: {
hidden: false,
color: '#FF0000',
altColor: '#808080'
},
2: {
hidden: false,
visibleInLegend: false,
color: '#00FF00'
},
3: {
hidden: false,
color: '#00FF00',
altColor: '#808080'
},
4: {
hidden: false,
visibleInLegend: false,
color: '#0000FF'
},
5: {
hidden: false,
color: '#0000FF',
altColor: '#808080'
}
};
var options = {
series: series,
height: 400,
width: 600
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
//if row is undefined, we clicked on the legend
if (typeof chart.getSelection()[0]['row'] === 'undefined') {
//column is the DataView column, not DataTable column
//so translate and subtract 1 to get the series index
var col = view.getTableColumnIndex(chart.getSelection()[0]['column']) - 1;
//toggle the selected column's data counterpart visibility
series[col - 1].hidden = !series[col - 1].hidden;
//swap colors
var tmpColor = series[col].color;
series[col].color = series[col].altColor;
series[col].altColor = tmpColor;
//reset the view's columns
view.setColumns([0,1,2,3,4,5,6]);
//build list of hidden columns and series options
var hiddenCols = [];
options.series = [];
for (var i = 0; i < 6; i++) {
if (series[i].hidden) {
//add 1 to the series index to get DataTable column
hiddenCols.push(i + 1);
}
else {
options.series.push(series[i]);
}
}
//hide the columns and draw the chart
view.hideColumns(hiddenCols);
chart.draw(view, options);
}
});
chart.draw(view, options);
}
    Que faire si un objet de tableau de bord est utilisé?
    heureusement asgallant maintenant, participe tout le temps ici, puisque c'est à l'origine de sa logique, il peut être utile de poser une nouvelle question, la référence de celui-ci, et il va probablement répondre, car il est incroyablement intelligent et engagé à aider vous les gars!

    OriginalL'auteur jmac

  2. 2

    Voici la solution. Vous pouvez vous cacher dans votre ligne graphique en cliquant sur la légende.

            google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
//if selection length is 0, we deselected an element
if (sel.length > 0) {
//if row is undefined, we clicked on the legend
if (typeof sel[0].row === 'undefined') {
var col = sel[0].column;
if (columns[col] == col) {
//hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
//grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
//show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});

    Voici l'échantillon de travail. jqfaq.com

    OriginalL'auteur Abinaya Selvaraju

  3. 0

    Comme mentionné ci-dessus, vous pouvez créer un DataView pour votre DataTable et puis

    pour afficher uniquement les cliqué sur la ligne/colonne, appel
    vue.setColumns(graphique.getSelection()[0].colonne)

    pour masquer les cliqué sur la ligne/colonne d'appel
    vue.hideColumns(graphique.getSelection()[0].colonne)

    getSelection() aura la ligne/la légende sur le graphique que vous avez sélectionné.

    OriginalL'auteur Sidharth Middela