Insérer des Liens dans Google api Graphiques de données?

J'ai été jouer avec Google charts un peu plus dans les résultats de google charts terrain de jeu ici:

Le code que j'ai joué est: est-ce

function drawVisualization() {
  //Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['2003',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  //Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

et qui me donne un beau tableau qui ressemble à ceci:

Je suis en train d'avoir ce tableau correspondent aux besoins de mon site, et pour ce faire, j'ai besoin de faire la barre de noms sur la gauche, des liens vers une autre page. Ainsi, par exemple, de 2003 serait un lien sur lequel l'utilisateur peut cliquer sur les sna serait alors en 2004 etc.

J'ai essayé de faire quelque chose comme ceci:

function drawVisualization() {
  //Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['<a href="url">Link text</a>',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  //Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

Mais je ne pouvait espérer pour qu'il soit si facile que ça et il n'était pas. Personne ne sait si cela est possible?

OriginalL'auteur Mike | 2012-10-03

Ce n'est pas triviale car la sortie que vous voyez est le SVG, pas en HTML. Ces étiquettes dans votre exemple ("2004", "2005", etc) sont intégrés à l'intérieur de SVG nœuds de texte, si l'insertion de raw des balises HTML à l'intérieur d'eux ne sera pas rendu au format HTML.

La solution de contournement consiste à rechercher les nœuds de texte contenant les valeurs cibles (encore une fois, "2004", "2005", etc) et de les remplacer par ForeignObject éléments. ForeignObject éléments peuvent contenir HTML ordinaire. Ceux-ci doivent être placés à plus ou moins où l'original SVG nœuds de texte avait été.

Voici un extrait d'exemple illustrant tout cela. Elle est à l'écoute de votre exemple précis, de sorte que lorsque vous basculez sur le rendu de ce que vos données réelles est, vous voulez les modifier et de les généraliser cet extrait de code en conséquence.

//Note: You will probably need to tweak these deltas
//for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
  if (years.indexOf(el.textContent) != -1) {
    var g = el.parentNode;
    var x = el.getAttribute('x');
    var y = el.getAttribute('y');
    var width = el.getAttribute('width') || 50;
    var height = el.getAttribute('height') || 15;

    //A "ForeignObject" tag is how you can inject HTML into an SVG document.
    var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
    fo.setAttribute('x', x - xDelta);
    fo.setAttribute('y', y - yDelta);
    fo.setAttribute('height', height);
    fo.setAttribute('width', width);
    var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
    var a = document.createElement("A");
    a.href = "http://yahoo.com";
    a.setAttribute("style", "color:blue;");
    a.innerHTML = el.textContent;
    body.appendChild(a);
    fo.appendChild(body);

    //Remove the original SVG text and replace it with the HTML.
    g.removeChild(el);
    g.appendChild(fo);
  }
});

Note mineure, il y a un peu de jQuery là pour des raisons de commodité, mais vous pouvez remplacer $('text') avec document.getElementsByTagName("svg")[0].getElementsByTagName("text").

Existe-il des api graphiques que j'ai pu le faire plus facilement?
La solution parfaite! Merci
Parfait. J'ai besoin de liens en vaxis titres. Merci.

OriginalL'auteur manzoid

Manzoid la réponse est bonne, mais "un peu de montage est toujours nécessaire", comme il affiche une boîte d'alerte, plutôt que de suivre le lien. Voici une réponse plus complète, MAIS elle rend les barres cliquable plutôt que de les étiquettes. J'ai créer un DataTable qui comprend les liens, puis créer un DataView de que pour sélectionner les colonnes que je veux afficher. Puis, quand l'sélectionnez l'événement se produit, je viens de récupérer le lien de l'original de la DataTable.

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'link', 'Austria'],
['2003', 'http://en.wikipedia.org/wiki/2003',  1336060],
['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]             
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}};
var chart = new google.visualization.BarChart( 
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 900px;"></div>
</body>
</html>

OriginalL'auteur Mark Butler

Depuis le SVG-l'incorporation de la route (et c'est compréhensible) trop poilue pour vous de envie de coucher avec, essayons une approche complètement différente. En supposant que vous avez la possibilité de modifier votre spécification fonctionnelle un peu, de telle sorte que la bars sont cliquables, pas la étiquettes, alors voici une solution beaucoup plus simple qui fonctionne.

Recherchez le alert dans cet extrait, c'est la partie que vous pourrez personnaliser à faire la redirection.

function drawVisualization() {
//Create and populate the data table.
var rawData = [
['Year', 'Austria'],
['2003',  1336060],
['2004',  1538156],
['2005',  1576579],
['2006',  1600652],
['2007',  1968113],
['2008',  1901067]
];
var data = google.visualization.arrayToDataTable(rawData);
//Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
var handler = function(e) {
var sel = chart.getSelection();
sel = sel[0];
if (sel && sel['row'] && sel['column']) {
var year = rawData[sel['row'] + 1][0];
alert(year); //This where you'd construct the URL for this row, and redirect to it.
}
}
google.visualization.events.addListener(chart, 'select', handler);
}

Merci pour l'aide

OriginalL'auteur manzoid

1

J'ai n'ont apparemment pas assez de points de réputation pour commenter directement à une réponse précédente, donc mes excuses pour ce faire un nouveau post. manzoid la suggestion est bien, mais il a un problème, j'ai trouvé, et il semble que Mark Butler pourrait avoir couru dans le même problème (ou inconsciemment éludée).
```
if (sel && sel['row'] && sel['column']) {
```
Que la ligne de garde le premier point de données d'être cliquable. Je l'ai utilisé sur un Janv-Déc graphique à barres, et seulement Fév-Déc étaient cliquables. Retrait de sel['ligne'] à partir de l'état permet à Jan de travail. Je ne sais pas si la (les) condition est en fait même pas nécessaire, cependant.

OriginalL'auteur overflowing
0

Vous devez utiliser formateurs.

Si vous remplacez la valeur HTML tri ne fonctionnera pas correctement.

OriginalL'auteur Rafal Enden

Voici une autre solution qui encapsule chaque balise de texte pour les étiquettes avec la balise d'ancrage.

pas ForeignObject
cliquable étiquette
styliser par css (hover effet)

Voici un échantillon: https://jsfiddle.net/tokkonoPapa/h3eq9m9p/

/* find the value in array */
function inArray(val, arr) {
var i, n = arr.length;
val = val.replace('…', ''); //remove ellipsis
for (i = 0; i < n; ++i) {
if (i in arr && 0 === arr[i].label.indexOf(val)) {
return i;
}
}
return -1;
}
/* add a link to each label */
function addLink(data, id) {
var n, p, info = [], ns = 'hxxp://www.w3.org/1999/xlink';
//make an array for label and link.
n = data.getNumberOfRows();
for (i = 0; i < n; ++i) {
info.push({
label: data.getValue(i, 0),
link:  data.getValue(i, 2)
});
}
$('#' + id).find('text').each(function(i, elm) {
p = elm.parentNode;
if ('g' === p.tagName.toLowerCase()) {
i = inArray(elm.textContent, info);
if (-1 !== i) {
/* wrap text tag with anchor tag */
n = document.createElementNS('hxxp://www.w3.org/2000/svg', 'a');
n.setAttributeNS(ns, 'xlink:href', info[i].link);
n.setAttributeNS(ns, 'title', info[i].label);
n.setAttribute('target', '_blank');
n.setAttribute('class', 'city-name');
n.appendChild(p.removeChild(elm));
p.appendChild(n);
info.splice(i, 1); //for speeding up
}
}
});
}
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', {role: 'link'}],
['New York City, NY', 8175000, 'hxxp://google.com/'],
['Los Angeles, CA',   3792000, 'hxxp://yahoo.com/' ],
['Chicago, IL',       2695000, 'hxxp://bing.com/'  ],
['Houston, TX',       2099000, 'hxxp://example.com'],
['Philadelphia, PA',  1526000, 'hxxp://example.com']
]);
var options = {...};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
addLink(data, 'chart_div');
}

OriginalL'auteur tokkonopapa

Vous devez vous connecter pour publier un commentaire.