如何在谷歌图表上绘制带有标签的散点图?

时间:2016-06-21 06:54:44

标签: javascript angularjs google-visualization label google-chartwrapper

spreadsheet中查看此Google图表。

如何在图表上绘制此名称而不是工具提示?是否需要更改提供给Google图表的数据或选项?

您可以查看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 个答案:

答案 0 :(得分:3)

您可以使用注释列将标签添加到散点图...

参见以下示例......



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>
&#13;
&#13;
&#13;