Google チャート API を使用して散布図を描画しています。散布図の各ノードにラベルを付ける方法はありますか。数値のみを使用していると思います.....代わりに使用できる他のツール。例:
Name Age Response
Allen 12 40
Tom 16 45
Sim 17 60
X 軸と Y 軸はそれぞれ年齢と反応ですが、グラフの各ノードに Allen、Tom、Sim のラベルを付けることができます
Google チャート API を使用して散布図を描画しています。散布図の各ノードにラベルを付ける方法はありますか。数値のみを使用していると思います.....代わりに使用できる他のツール。例:
Name Age Response
Allen 12 40
Tom 16 45
Sim 17 60
X 軸と Y 軸はそれぞれ年齢と反応ですが、グラフの各ノードに Allen、Tom、Sim のラベルを付けることができます
ツールチップを追加することで、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
)
視覚化 API を使用してこれを行うには、cell_object (https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object) を使用するだけです。Google API プレイグラウンドは私にとって役に立ちました。
コードの例を次に示します。
var data = google.visualization.arrayToDataTable([
['Age','Response'],
[ {v:12, f: 'Allen'}, 40],
[ {v:16, f: 'Tom'}, 45],
[ {v:17, f: 'Sim'}, 60]
]);
それが役立つことを願っています!
https://developers.google.com/chart/image/docs/gallery/scatter_charts#chart_types
このページでは、プロットの色付けと凡例の追加について説明します。
Google チャートでは、凡例と相互参照を使用しないとできません。個々のプロットにラベルを付ける散布図作成者は知りません。