Google Chart getSelection nicht haben column-Eigenschaft

Wenn ich:

chart.getChart().getSelection()[0]

in einem Diagramm (von einem chartwrapper, damit die getChart() zuerst), die getSelection () - Funktion gibt
nur eine Zeile-Eigenschaft, aber nicht Eigenschaft der Spalte, obwohl mein 'chart' ist eine Tabelle, und klicken Sie irgendwo innerhalb sollte es wieder sowohl eine Zeile und Spalte Eigenschaft.

Ist dies ein bekannter google-charts-bug? Kennt jemand einen workaround?

Auch fand ich in diesem Thema auf google-groups:
https://groups.google.com/forum/#!topic/google-visualization-api/O_t7-s96A9w

hier werden Sie sagen:
Derzeit ist das Table-Objekt unterstützt nur die Zeile Auswahl und daher die column-Eigenschaft ist immer undefiniert. Wenn dies für Sie wichtig ist, können Sie fangen diese Ereignisse selbst, durch hinzufügen einiger spezieller html-code int er formatierte Wert jeder Zelle.

Jemand eine Idee, wie dies zu tun?

  • Könnte Sie klären, etwas, was Sie versuchen zu tun? Ich denke, diese Frage kann Ihnen auch helfen, da es scheint verwandt zu sein.
  • Ich möchte zu Holen die ausgewählte Zelle Wert in einer google-chart-Tabelle. Wie google sagen sollte möglich sein, hier: code.google.com/apis/ajax/playground/... und hier: developers.google.com/chart/interactive/docs/.... Allerdings, wenn Sie schauen Sie sich Ihre Beispiele...es gar nicht funktionieren. Also ich denke, Es wurde noch nicht implementiert ist. Wenn jemand einen work-around, um diese Arbeit zu machen, das wäre toll. Die Frage, die Sie sich beziehen ist verwandt, aber ich weiß, wie zu erfassen, die Veranstaltung, es ist die, dass ein "gchart" Tisch nicht wieder eine Spalte zu koordinieren.
  • Du hast Recht, es scheint zerbrochen-diese Beispiele wurden die arbeiten vor einigen Monaten, sogar ändern die version der API nicht scheinen, um es zu beheben. Seltsam in der Tat.
InformationsquelleAutor Sleenee | 2013-11-23
  1. 1

    Obwohl google.visualization.table unterstützt Zeilen-Auswahl nur (es erklärt, warum die column-Eigenschaft gibt null zurück), könnten Sie überlegen, ob der folgende Ansatz zum Zugriff auf column-Eigenschaft:

    JS:

    google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: '$10,000'
      },
        true
      ],
      ['Jim', {
          v: 8000,
          f: '$8,000'
      },
        false
      ],
      ['Alice', {
          v: 12500,
          f: '$12,500'
      },
        true
      ],
      ['Bob', {
          v: 7000,
          f: '$7,000'
      },
        true
      ]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    table.draw(data, {
        showRowNumber: false
    });
}



function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var e = event || window.event;
  var cell = e.target; //get selected cell
 
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;

}

    HTML:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
<div id="output"></div>

    InformationsquelleAutor Vadim Gremyachev
  2. 0

    Können Sie formatieren Sie Ihre Werte mit HTML, und pass 'allowHtml: true" in deiner draw-Optionen. Dann ist dein HTML kann das Ereignis auslösen /ausführen der js, die Sie wollen, dass es, wenn ein Benutzer klickt auf die Zelle Wert.

    Beispielsweise die Artikel unten wird eine Warnung ausgelöst wird, wenn darauf geklickt wurde:

    function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Ted',  {v: 10000, f: '<span onclick="alert(0)">$10,000</span>'}, true],
        ['Jim',   {v:8000,   f: '<span onclick="alert(1)">$8,000</span>'},  false],
        ['Alice', {v: 12500, f: '<span onclick="alert(2)">$12,500</span>'}, true],
        ['Bob',   {v: 7000,  f: '<span onclick="alert(3)">$7,000</span>'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function () {
        var s = table.getSelection();
        document.getElementById('row').innerHTML = s[0].row;
        document.getElementById('col').innerHTML = s[0].column;
        console.log(s);
    });
    table.draw(data, {showRowNumber: true, allowHtml: true});
}

google.load('visualization', '1', {packages:['table'], callback: drawTable});

    Finden Sie unter:

    http://jsfiddle.net/fZzch/2/

    Ein sauberer Ansatz ist die Verwendung einer benutzerdefinierten Formatierer:

    Wie schreibt man einen benutzerdefinierten Formatierer für Google DataTables (für den Einsatz auf Visualisierungs-api)

    InformationsquelleAutor Eric Patrick
Schreibe einen Kommentar