How to draw scatter chart with labels on google ch

2019-07-15 03:23发布

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条回答
走好不送
2楼-- · 2019-07-15 03:50

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>

查看更多
登录 后发表回答