select scatter plot dot on external click event google charts

问题

I have an external ul li list containing john and smith this list is not part of scatter chart (html code not define here). When user click on john or smith, scatter plot's related dot should be selected and change its color from blue to red.

Secondly I use google.visualization.events.addListener(scatterChart, 'select', tableSelectHandler); to change dot color but its color didn't remain changed. Is there any solution for these two situations. I use following code.

var jsonData = '[[{"type":"number","label":"row"},{"type":"string","label":"Screen Name"},{"type":"number","label": "Followers Count"},{"type":"number","label":"Following Count"},{"type":"datetime","label":"Date"}],[1,"john",215,263,"Date(2016,1,10,17,07,38)"],[1,"smith",315,363,"Date(2016,1,10,18,07,38)"]]'; 

   var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData));


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

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'width': "100%",
      'filterColumnLabel': 'row',
      'minValue': 1,
      'maxValue': totalTweets
    },
      // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 1, 'highValue': 1000}
  });

   // Create a scatter chart, passing some options
  var scatterChart = new google.visualization.ChartWrapper({
    'chartType': 'ScatterChart',
    'containerId': 'scatter_chart_div',
    'options': {
      'width': "100%",
      'height': 390,
      'legend': 'none',
      explorer : {
            actions : [ 'dragToZoom', 'rightClickToReset' ],
        },
    },

    // The scatter chart will use the following columns
    // out of all the available ones.
    'view': {'columns': [4, 2]}

  });

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

  // 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(donutRangeSlider, scatterChart);

    function tableSelectHandler() {

        var selection = scatterChart.getChart().getSelection();
        if(selection.length) {
            var selectedScreenName = data.getValue(selection[0].row, 1);

            // Select sidebar screen_name
            $("#" + selectedScreenName).trigger("click");

$("#scatter_chart_div div div div svg g g g circle[stroke-width='0']").attr("fill", "#fff000");


            // scroll to view sidebar screen_name
            var position = $("#" + selectedScreenName).offset().top - 
            $('#singleUserTimelineScreenNamesContainer').offset().top + 
            $('#singleUserTimelineScreenNamesContainer').scrollTop();
            $('#singleUserTimelineScreenNamesContainer').animate({ scrollTop: position });


            var view = new google.visualization.DataView(data);

            view.setColumns([1,2, {
                type: 'string',
                role: 'style',
                calc: function (dt, i) {
                console.log(i);
                    return (i == row) ? 'color: red' : null;
                }
            }]);

            scatterChart.draw(view);

        }
    }

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

回答1:

The easiest way is to change point color is a style column. Looks like you were on that path.

Added a style column to jsonData and set the initial style to null
Added new column index to scatterChart view option

To change color, see...
tableSelectHandler and $('.name-container').click for clicking li

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

function drawChart() {
  var jsonData = '[[{"type":"number","label":"row"},{"type":"string","label":"Screen Name"},{"type":"number","label": "Followers Count"},{"type":"number","label":"Following Count"},{"type":"datetime","label":"Date"},{"type":"string","role":"style","p": {"html": true}}],[1,"john",215,263,"Date(2016,1,10,17,07,38)",null],[1,"smith",315,363,"Date(2016,1,10,18,07,38)",null]]';

  var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData));


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

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'width': "100%",
      'filterColumnLabel': 'row',
      'minValue': 1,
      'maxValue': 1000
    },
      // Explicitly positions the thumbs at position 3 and 8,
    // out of the possible range of 1 to 10.
    'state': {'lowValue': 1, 'highValue': 1000}
  });

   // Create a scatter chart, passing some options
  var scatterChart = new google.visualization.ChartWrapper({
    'chartType': 'ScatterChart',
    'containerId': 'scatter_chart_div',
    'options': {
      'width': "100%",
      'height': 390,
      'legend': 'none',
      'pointSize': 10,
      explorer : {
            actions : [ 'dragToZoom', 'rightClickToReset' ],
        },
    },

    // The scatter chart will use the following columns
    // out of all the available ones.
    'view': {'columns': [2, 4, 5]}
  });

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

  // 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(donutRangeSlider, scatterChart);

  function tableSelectHandler() {
    var selection = scatterChart.getChart().getSelection();
    if(selection.length) {
      togglePoint(selection[0].row);
    }
  }

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

  $('.name-container').click(function(e){
      var selection = data.getFilteredRows([
        {
          column: 1,
          value: $(this).text()
        }
      ]);

      if(selection.length) {
        togglePoint(selection[0]);
      }
  });

  function togglePoint(index) {
    var color;

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      color = (index === i) ? 'fill-color: red;' : null;
      data.setValue(i, data.getNumberOfColumns() - 1, color);
      scatterChart.draw();
    }
  }
}

<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter_div"></div>
<div id="scatter_chart_div"></div>
<ul>
  <li class="name-container">john</li>
  <li class="name-container">smith</li>
</ul>

来源：https://stackoverflow.com/questions/35322613/select-scatter-plot-dot-on-external-click-event-google-charts