How to draw scatter chart with labels on google chart?

问题

Look at this Google chart in spreadsheet.

How to draw this names on chart rather than tooltips? Is there need to change in data or options given to Google chart?

You can check this plunker.

var chart2 = {};
chart2.type = "ScatterChart";
chart2.cssStyle = "height:400px; width:500px;";
chart2.data = [
      ['Age', 'Weight'],
      [ {'v':8,'f':'Name 1'},      -12],
      [ {'v':-4,'f':'Name 2'},      5.5],
      [ {'v':11,'f':'Name 3'},     14],
      [ {'v':-4,'f':'Name 4'},      -5],
      [ {'v':3,'f':'Name 5'},      3.5],
      [ {'v':6.5,'f':'Name 6'},    -7]
    ];

chart2.options = {
    "title": "Age Vs Maturity",
    "isStacked": "true",
    "fill": 20,
    "hAxis": {"title": "Age", minValue: -15, maxValue: 15},
    "vAxis": {"title": "Maturity", minValue: -15, maxValue: 15},
    "legend": 'none'
};

$scope.chart2 = chart2;

回答1:

you can use an annotation column to add labels to a scatter chart...

see following example...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Age', 'Weight', {role: 'annotation'}],
      [ 8,      12, 'Point 1'],
      [ 1,      5.5, 'Point 2'],
      [ 11,     14, 'Point 3'],
      [ 4,      5, 'Point 4'],
      [ 3,      3.5, 'Point 5'],
      [ 6.5,    7, 'Point 6']
    ]);

    var options = {
      title: 'Age vs. Weight comparison',
      hAxis: {title: 'Age', minValue: 0, maxValue: 15},
      vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
      legend: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

来源：https://stackoverflow.com/questions/37937417/how-to-draw-scatter-chart-with-labels-on-google-chart