1

クリックしたときに円グラフの選択したスライスの値を取得しようとすると、大きな問題が発生します。

ドキュメントには次のように書かれています。

selection_array：選択されたオブジェクトの配列。各オブジェクトは、視覚化の作成に使用される基になるテーブル（DataViewまたはDataTable）のデータ要素を記述します。各オブジェクトにはプロパティrowおよび/またはcolumnがあり、基になるDataTableで選択されたアイテムの行および/または列のインデックスがあります。行プロパティがnullの場合、選択は列です。columnプロパティがnullの場合、選択は行です。両方がnull以外の場合、それは特定のデータ *アイテムです。DataTable.getValue（） *メソッドを呼び出して、選択したアイテムの値を取得できます。取得した配列をsetSelection（）に渡すことができます

私の場合、getSelection（）からnullを取得すると、必要な値（そのスライスに対応する列のラベル）を取得するために何をすべきかがわかりませんでした。

どんな答えも非常に高く評価されます:)

私がしていることのサンプルコード：

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
}
4

1 に答える 1

1

問題は、チャート/データの設定方法にあります。

現在、グラフを生成するために列2のすべてのデータを集計しています。この場合、値に7つのUrbanaと3つのRuralがあるため、これらの10行を2つのカテゴリに集約します。円の各スライスは集計値のセットを参照し、円グラフでは1つの値しか選択できないため、その方法で3つの行を選択することはできません。

さらに、UrbanaまたはRuralのいずれかを選択すると、単一のカテゴリの100％を示す円グラフが表示されるため、カテゴリセレクタは現在のようにあまり使用されません。

データを別の方法で設定すると、次の例のように、スライスを選択するたびにオブジェクトの配列が適切に取得されます。

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
}
于 2013-02-07T00:06:53.090 に答える