Holen Sie sich Daten aus der ausgewählten Scheibe des google charts PieChart

habe ich große Schwierigkeiten, die versuchen, um den Wert des ausgewählten Segment des PieChart-wenn Ihr auf Sie geklickt wird.

In der Dokumentation sagt:

selection_array: Ein array der ausgewählten Objekte, von denen jedes über ein
data-element in der zugrunde liegenden Tabelle zum erstellen der Visualisierung
(ein DataView-Objekt oder ein DataTable -). Jedes Objekt hat Eigenschaften, die Zeilen-und/oder
Spalte mit dem index der Zeile und/oder Spalte des ausgewählten Elements
in der zugrunde liegenden Datentabelle. Wenn die row-Eigenschaft ist null, dann wird der
Auswahl einer Spalte; wenn Sie die column-Eigenschaft ist null, dann wird der
Auswahl um eine Zeile; wenn beide ungleich null ist, dann ist es ein Daten -
*Element. Aufrufen können Sie die DataTable.getValue()* Methode, um den Wert der
das ausgewählte Element. Die abgerufenen array übergeben werden können, in
setSelection()

in meinem Fall bekomme ich null von getSelection(), dann konnte ich nicht herausfinden, was zu tun ist, um den Wert den ich will (das label für die entsprechende Spalte, um die Scheibe).

Jede Antwort wird sehr apreciated 🙂

den Beispiel-code, welcher im das tun:

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

var data;
var pie_area;

function drawVisualization() {
  //Prepare the data
  data = google.visualization.arrayToDataTable([
    ["rbd", "nombre", "area", "dependencia", "simceMat", "ubicacionLon", "ubicacionLat", "simceLen", "nivel"],
    [22616, "Colegio Mozart", "Urbana", "Part_Sub", 228, -72.981148, -41.479872, 254, "Basico"],
    [22686,"Escuela Basica Camelias","Urbana","Muni",228,-72.980075,-41.474599,253, "Medio"],
    [40351,"Colegio Bosquemar","Urbana","Part_Sub",290,-72.981148,-41.479872,280, "Medio"],
    [7633,"Escuela Capitan Arturo Prat Chacon","Urbana","Muni",317,-72.909565,-41.474567,314, "Basico"],
    [7659,"Escuela Rural Alerce","Rural","Muni",230,-72.91767,-41.399121,249, "Basico"],
    [7671,"Escuela Rural Lagunitas","Rural","Muni",261,-72.964282,-41.459485,269, "Medio"],
    [7690,"Escuela Rural Rio Blanco","Rural","Muni",217,-72.638597,-41.455786,229, "Medio"],
    [7700,"Colegio San Francisco Javier","Urbana","Part",305,-72.942089,-41.470351,303, "Basico"],
    [7717,"Instituto Aleman de Puerto Montt","Urbana","Part",321,-72.932482,-41.470001,310, "Medio"],
    [7718,"The American School","Urbana","Part",317,-72.909,-41.456,314, "Medio"]
  ]);

  var fltArea = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'f1',
    'options': {
      'filterColumnLabel': 'area',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  pie_area = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart2',
      'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'title': 'Area',
        'pieSliceText': 'label'
      },
      'view': {'columns': [2]}
    });

  new google.visualization.Dashboard(document.getElementById('dashboard')).bind([fltArea], [pie_area]).draw(data);
  google.visualization.events.addListener(pie_area, 'select', onAreaSliceSelected);

}

function onAreaSliceSelected(){
  var sel = pie_area.getChart().getSelection(); //is always null
  console.log('you selected '+sel); //displays you selected null
}

InformationsquelleAutor rccursach | 2013-02-06

  1. 1

    Die Frage ist, wie Ihr Diagramm/Daten eingerichtet ist.

    Sind Sie derzeit Aggregierung aller Daten aus der Spalte 2, um das Diagramm zu generieren. In diesem Fall haben Sie 7 Urbana, und 3 Ländlichen für Ihre Werte, so dass es Aggregate, die die 10 Zeilen, die in zwei Kategorien. Da jedes Stück von der Torte bezieht sich auf einen Satz aggregieren der Werte und Kreisdiagramme erlauben nur ein einzelner Wert ausgewählt zu werden, Sie nicht bekommen kann die Auswahl von drei Zeilen Weg.

    Zusätzlich ist auch die Kategorie-Selektor nicht viel verwenden, wie es derzeit ist, weil, wenn Sie entweder Urbana oder auf dem Land, Sie bekommen am Ende ein Kreisdiagramm 100% von einer einzigen Kategorie.

    Wenn Sie Ihre Daten anders, Sie richtig zu bekommen, ein array von Objekten wenn Sie ein Segment auswählen, wie in diesem Beispiel:

    function drawVisualization() {
  //Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  //Create and draw the visualization.
  pieChart = new google.visualization.PieChart(document.getElementById('visualization'));
  pieChart.draw(data, {title:"So, how was your day?"});
  google.visualization.events.addListener(pieChart, 'select', onAreaSliceSelected);
}

function onAreaSliceSelected(){
  var sel = pieChart.getSelection(); //is always null
  alert('you selected '+sel); //displays you selected null
}
    Ok, jmac, ich kann Sie jetzt sehen. aber dann, wenn ich will, um ein Diagramm, in dem "Bereich" Spalte, sollte Baue ich meine eigene "mini" - DataTable mit den Daten die ich anzeigen möchten, und aktualisieren Sie es, wenn ein Ereignis passiert? weil ich zeigen möchte, 4 PieCharts, stellt 4 Kategorien, und bieten die option auf Scheiben, die aus jedem chart die Daten zu filtern, der eine sehr große Tabelle mit Daten. zum Beispiel: ich habe eine große Liste von Schulen, die 1 - Klick-in "Urban" Scheibe "Area Chart" - filter aus jeder Schule, die nicht in einem städtischen Gebiet. 2 - im nächsten Diagramm wählen Sie "Öffentlich", und filtern Sie aus jeder Schule, die nicht public.. und so weiter.
    Ich würde vorschlagen, die Zusammenstellung der Logik, wie Sie zulassen möchten, dass Benutzer zum sichten der Daten, und dann herauszufinden, der beste Weg, um Ihre Daten zu organisieren, es zu tun. Leider ist es nicht so einfach ist, eine Art "Flügel" und aktualisieren Sie dann, wie Sie entlang gehen, und in der Regel die Planung, die Dinge vorher zu sehen, wie viele Tabellen/Diagramme, die Sie benötigen, sparen Sie viele Kopfschmerzen auf lange Sicht.

    InformationsquelleAutor jmac

Schreibe einen Kommentar