Question

我使用谷歌图表API绘制散点图，有没有办法在散点图中标记每个节点。我想它只使用数值.....我可以使用任何其他工具。例如：

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

X轴和y轴分别是年龄和响应，但图表上的每个节点都可以标记为Allen，Tom，Sim

Answer 1

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

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

Answer 4

https://developers.google.com/chart/image/docs/gallery/scatter_charts#chart_types

此页面记录着色图并添加图例。

使用Google图表，您不能使用图例和交叉引用。我不知道任何散点图创建者会标记各个图。

向Google散点图添加标签

4 个答案: