Google Visualisierung "p Property" unterstützte Attribute - Google-Visualisierung

Ich möchte, dass der Wert ("v") beim Rollover mit dem Standard-HTML-Titelattribut angezeigt wird (neben anderen Attributen für andere Zwecke).

In den Visualisierungsdokumenten wird angegeben, dass dies über die "p-Eigenschaft" erfolgen kann. In meinem Code unten wird jedoch NUR className als Attribut in den td-Tags gerendert.

Bei dem Attribut "style" handelt es sich um ein Beispiel, das direkt aus der Dokumentation übernommen wurde. https://developers.google.com/chart/interactive/docs/reference#cell_objectIch nehme an, ich mache etwas falsch. Kannst du sehen, was es sein könnte?

Zellenobjekt:

{
"v": "/?s=mi+shampoo+adecuado?&submit=Buscar",
"f": "/?s=m...uscar",
"p": {
"title": "/?s=mi+shampoo+adecuado?&submit=Buscar",
"style": "border: 1px solid green;",
"className": "randomCls",
"data-title": "/?s=mi+shampoo+adecuado?&submit=Buscar"
}
},

Visualisierungscode

var table = new google.visualization.DataTable();
for(var j=0; j < data[0].length; j++) {
table.addColumn(typeof data[1][j].v,data[0][j]);
}
data.shift();
table.addRows(data);
var ac = new google.visualization.Table(graph.get(0)); // AreaChart

ac.draw(table, {
backgroundColor: {fill:"#d4d4d4"},
colors : ["#999999","#004087"]
});

Antworten:

Die Tabellenvisualisierung unterstützt nur Eigenschaften "className" und "style" für Zellen. Wenn Sie zusätzliche HTML-Eigenschaften auf Zellen anwenden müssen, müssen Sie benutzerdefinierten Code schreiben, um das zu analysieren <table> Element, das durch die Visualisierung erstellt wurde, und fügen Sie die Eigenschaften hinzu <td> Elemente manuell. Wenn Sie die Eigenschaften auf den Zelleninhalt anstatt auf die setzen können <td> Elemente können Sie die formatierten Werte der Zellen so festlegen, dass sie den gewünschten HTML-Code enthalten.

Vielen Dank an @asgallant für die Klarstellung der unterstützten Attribute. Also, hier ist der Code entsprechend:

var wrapper = new google.visualization.ChartWrapper({
chartType: "Table",
dataTable: table,
options: {backgroundColor: {fill:"#d4d4d4"}, colors : ["#999999","#004087"], allowHtml:true},
containerId: "widget"+wid
});

google.visualization.events.addListener(wrapper, "ready", function() {
graph.find(".tipFlag").each(function(){
var v = $(this).attr("class").substring("tipFlag ".length);
$(this).attr("title", v);
});
});

wrapper.draw();

Wo die neuen Zellenobjekte aussehen:

{
"v": "/?s=mi+shampoo+adecuado?&submit=Buscar",
"f": "/?s=m...uscar",
"p": {
"className": "tipFlag /?s=mi+shampoo+adecuado?&submit=Buscar",
}
},