javascript - 谷歌图表 :Wrong result of 'select' event after filtered with ControlWrapper

Question

更新

我已经修改了代码来解决这个问题

不需要将选择事件包装到就绪状态——这个固定的双标签打开

google.visualization.events.addListener(chart1 ,'select', tableSelectHandler);

function tableSelectHandler(){
   var selection = chart1.getChart().getSelection()[0];
   var chartDataView = chart1.getDataTable();
   var rowindex = chartDataView.getTableRowIndex(selection.row);
   
      //in case you need value from underlyingtable (data1)
      
			var cnid = data1.getValue(rowindex, 0);
			var polid = data1.getValue(rowindex, 1);
			var strid = data1.getValue(rowindex, 2);
			var statecode = data1.getValue(rowindex, 4);
	
      window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
		
	}

---

你可以在我的页面看到错误的结果here

当你点击时间线图表上的任何栏时，它会打开一个新标签并链接到另一个页面，这里的结果是正确的。

但是在你用 controlWrapper 过滤它之后

然后再次点击任意栏，它会链接到错误的页面并打开双标签。

对于事件的代码

google.visualization.events.addListener(chart1, 'ready', function() {
  google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
});


function tableSelectHandler() {
  var selection = chart1.getChart().getSelection();
  var cnid = data1.getValue(selection[0].row, 0);
  var polid = data1.getValue(selection[0].row, 1);
  var strid = data1.getValue(selection[0].row, 2);


  var statecode = data1.getValue(selection[0].row, 4);
  if (selection.length > 0) {
    //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
    window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
  }

}

完整代码

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

google.charts.setOnLoadCallback(drawRegionsMap);



function drawRegionsMap() {

  var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
  //all
  query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
  query1.send(drawDashboard);
}

function drawDashboard(response1) {

  var data1 = response1.getDataTable();

  for (var row = 1; row < data1.getNumberOfRows(); row++) {
    if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   
      if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
        data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
      }
    }
  }



  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([
    //index column 0
    {
      type: 'string',
      id: 'Country',
      calc: function(dt, row) {
        //return countryname statename - policies // USA New York - WEEE
        return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
      }
    },
    //index column 1

    {
      type: 'string',
      id: 'policy',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 6)
      }
    }
    //index column 2
    , {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 11)
        var formatter = new google.visualization.DateFormat({
          pattern: "MMMM yyyy"
        });
        var startdate = formatter.formatValue(dt.getValue(row, 12));
        //var startdate = dt.getFormattedValue(row, 12)
        var comment = dt.getFormattedValue(row, 15)
        //colorValues.push(dt.getFormattedValue(row, 6))
        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      }
    },
    //style role
    {
      type: 'string',
      id: 'color',
      role: 'style',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 25)
      }
    },


    //index column 3,4 start-enddate
    12, 13,

  ]);



  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    //dataTable: 'data1',
    containerId: 'colormap1',
    options: {
      width: 800,
      height: 600,
      //colors: colorValues,

      timeline: {
        groupByRowLabel: true,
        rowLabelStyle: {
          fontSize: 12,
          width: 300
        },
        showBarLabels: false
      },
      tooltip: {
        isHtml: true
      },
    }


  });


  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnIndex': '1',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });


  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));




  // Establish dependencies, declaring that 'filter' drives 'pieChart',
  // so that the pie chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(namePicker, chart1);
  google.visualization.events.addListener(chart1, 'ready', function() {
    google.visualization.events.addListener(chart1, 'select', tableSelectHandler);
  });


  function tableSelectHandler() {
    var selection = chart1.getChart().getSelection();
    //var selection = chart1.getSelection();
    var cnid = data1.getValue(selection[0].row, 0);
    var polid = data1.getValue(selection[0].row, 1);
    var strid = data1.getValue(selection[0].row, 2);
    //var sid = (strid) - 1;

    var statecode = data1.getValue(selection[0].row, 4);
    if (selection.length > 0) {
      //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
      window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
    }

  }

  // Draw the dashboard.
  dashboard.draw(view1);



}

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <!--chart_div!-->
  <div id='colormap1'> </div>
</div>

有人知道这里发生了什么吗？

我假设选择仍然从默认图表中获取行(没有过滤) 但我不知道如何修复它。

谢谢。

Answer 1

而不是使用原始数据表来获取值...

data1.getValue(...)

使用图表中过滤后的数据表...

chart1.getDataTable().getValue(...)