添加标签到google散点图(Adding labels to google scatter cha

我使用谷歌图表API绘制散布，有没有办法标记在散点图上的每个节点。我想这只是使用的数值.....任何其他工具可以使用来代替。例：

Name  Age  Response 
Allen 12    40
Tom   16    45
Sim   17    60

X和Y轴将分别年龄和响应，但在图中的每个节点I可以标记为艾伦，汤姆，辛

Answer 1:

您可以通过添加一个工具提示标签在谷歌ScatterChart点。工具提示显示出来，当你将鼠标悬停在数据点。

为您的数据表中的代码应该是这个样子：

var dt = new google.visualization.DataTable(
{
    cols: [{id: 'A', label: 'Age', type: 'number'},
           {id: 'B', label: 'Response', type: 'number'},
           {id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}}
          ],
    rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}]},
           {c:[{v: 16}, {v: 45}, {v:'Tom'}]},
           {c:[{v: 17}, {v: 60}, {v:'Sim'}]}
          ]
 },
 0.6
)

当鼠标悬停点，名称将显示出来。

链接工具提示： https://developers.google.com/chart/interactive/docs/roles#tooltiprole

链接到DataTable类（格式化数据）： https://developers.google.com/chart/interactive/docs/reference#DataTable

注意：如果你想要绘制多个数据序列，您必须指定为每一个提示。例如，如果您添加的平均响应单独的数据系列，代码将变为：

var dt = new google.visualization.DataTable(
{
    cols: [{id: 'A', label: 'Age', type: 'number'},
           {id: 'B', label: 'Response', type: 'number'},
           {id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}},
           {id: 'D', label: 'AvgResp', type: 'number'},
           {id: 'E', label: 'Category', type:'tooltip', p:{role:'tooltip'}}
          ],
    rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}, {v:null}, {v:null}]},
           {c:[{v: 16}, {v: 45}, {v:'Tom'}, {v:null}, {v:null}]},
           {c:[{v: 17}, {v: 60}, {v:'Sim'}, {v:null}, {v:null}]},
           {c:[{v: 12}, {v: null}, {v:null}, {v: 35}, {v:'Avg. 12yo'}]},
           {c:[{v: 16}, {v: null}, {v:null}, {v: 48}, {v:'Avg. 16yo'}]},
           {c:[{v: 17}, {v: null}, {v:null}, {v: 52}, {v:'Avg. 17yo'}]}
          ]
 },
 0.6
)

Answer 2:

要使用可视化的API做，只是用一个cell_object（https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object）。在谷歌API的操场是有用的对我来说，可能是你： https://code.google.com/apis/ajax/playground

下面是一些代码的例子：

var data = google.visualization.arrayToDataTable([
      ['Age','Response'],
      [ {v:12, f: 'Allen'}, 40],
      [ {v:16, f: 'Tom'}, 45],
      [ {v:17, f: 'Sim'}, 60]
    ]);

希望帮助！

Answer 3:

我有同样的问题，绘制标签上的图表本身百分点。谷歌图表现在已经解决了这个问题。您可以添加更多的属性作为annotation 。通过它可以添加标签。

看看它是如何的模样。一般来说，我做注释的号码，然后解释这些数字是什么。

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']
    ]);