グーグルチャートで縦棒グラフのツールチップデータを取得する
プリヤ
次のコードを使用して、Google視覚化APIを使用して縦棒グラフをプロットしています。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Expenses'],
['2004', 400],
['2005', 460],
['2006', 1120],
['2007', 540]
]);
var options = {
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
バーの1つをクリックすると、ツールチップにx軸とy軸のデータが表示されます。ツールチップ（2006年と460年）にアラートとして表示されるデータが欲しいです。それを見つける方法。
志す
「select」イベントハンドラーを使用し、選択した要素に基づいてDataTableからデータを取得します。
google.visaulization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
alert(data.getValue(selection[0].row, 0) + ' ' + data.getValue(selection[0].row, selection[0].column));
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
HighCharts縦棒グラフのツールチップヘルプ
- 2
ハイチャートの縦棒グラフのヒストグラムは、ツールチップにx範囲を示しています
- 3
d3v4棒グラフのツールチップのデータを取得する
- 4
X軸ラベルは、ハイチャートの縦棒グラフのツールチップと重なっています
- 5
Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか？
- 6
再チャート-棒グラフのツールチップの数値にコンマを追加します
- 7
縦棒グラフのシリーズを作成するハイチャート
- 8
c3js ツールチップ タイトルに棒グラフの合計数を表示する
- 9
グーグルの積み上げ棒グラフに複数のツールチップを表示する方法
- 10
共有ツールチップを使用すると、クリック時に誤ったシリーズインデックスを返すハイチャート縦棒グラフ
- 11
ハイチャート縦棒グラフ、データテーブルからロードするときに補間を無効にする
- 12
動的d3スタック棒グラフでツールチップを表示する際の問題
- 13
縦棒グラフのGoogleChartsデータのグループ化
- 14
フュージョンチャートの縦棒グラフに値ラベルを含める方法
- 15
Googleチャート-ツールチップ内のグラフ
- 16
縦棒グラフのデータラベルをフォーマットする方法
- 17
縦棒グラフのレールをプロットする方法
- 18
ハイチャートの例の積み上げグループ縦棒グラフ
- 19
Googleチャート：積み上げ縦棒グラフのラベル付け
- 20
Googleマテリアルチャート縦棒グラフ（棒グラフ）カスタムの縦棒の色が機能しない
- 21
剣道の積み上げ棒グラフの各タイルにツールチップを追加する
- 22
ハイチャート：棒グラフの同じ線上にデータラベルを配置する
- 23
ハイチャートを使用した縦棒グラフのxAxisでのみ特定の年を表示する方法
- 24
グーグルチャートカスタムhtmlツールチップのphpデータテーブルにプロパティを追加する
- 25
ハイチャート：縦棒グラフの左右のパディングを削除します
- 26
Googleチャートの縦棒グラフは、最小値の下に棒グラフを表示します
- 27
chart.js棒グラフのツールチップをカスタマイズする
- 28
縦軸のグーグルチャートにタイトルを付ける
- 29
グーグルチャートフローティング最小/最大/平均縦棒グラフ
コメントを追加