【问题标题】:Adding labels to google scatter charts向谷歌散点图添加标签
【发布时间】:2012-10-11 20:43:21
【问题描述】:

我正在使用谷歌图表 API 绘制散点图,有没有办法标记散点图中的每个节点。我猜它只使用数值.....我可以使用的任何其他工具。 示例:

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

X 和 y 轴分别是年龄和反应,但图上的每个节点我都可以标记为 Allen、Tom、Sim

【问题讨论】:

    标签: charts google-visualization scatter-plot


    【解决方案1】:

    我在为图表本身的点绘制标签时遇到了同样的问题。 谷歌图表现在已经解决了这个问题。您可以添加一个属性为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']
        ]);
    

    【讨论】:

    • 替代方案:如果你使用新的DataTable,添加这样的列:data.addColumn({type:'string', role:'annotation'})。详情请见doc
    • @heringer:您应该添加新答案或更新现有答案。
    【解决方案2】:

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

    【讨论】:

    • 如何在图表上绘制这些标签?
    【解决方案3】:

    要使用可视化 API,只需使用 cell_object (https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object)。 google 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]
        ]);
    

    希望有帮助!

    【讨论】:

    • 如何在图表上绘制这些标签?
    【解决方案4】:

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

    此页面记录了为图着色和添加图例。

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-19
    • 1970-01-01
    • 1970-01-01
    • 2013-04-01
    • 1970-01-01
    相关资源
    最近更新 更多