如何在Google图表上绘制带有标签的散点图? [英] How to draw scatter chart with labels on google chart?

问题描述

在电子表格中查看此Google图表.

Look at this Google chart in spreadsheet.

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

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

您可以检查此 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;

推荐答案

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

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>

这篇关于如何在Google图表上绘制带有标签的散点图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！