您可以通过添加工具提示来标记 Google 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
)