十字のカーソル

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

概要

十字は細い縦線と横線で、グラフ内のデータポイントの中心に配置されています。グラフの作成者は、グラフのクロスカーソルを有効にすると、ユーザーが単一の要素をターゲットにできるようになります。

照準は、フォーカス、選択、またはその両方に表示できます。散布図折れ線グラフ面グラフ複合グラフの折れ線グラフと面グラフの各部分で使用できます。

簡単な例

下のポイントにカーソルを合わせるか、ポイントを選択してください。

上のウェブページは、十字線が太字で示されている部分です。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number');
        data.addColumn('number');
        for (var i = 0; i < 100; i++)
          data.addRow([Math.floor(Math.random()*100),
                       Math.floor(Math.random()*100)]);
        var options = {
          legend: 'none',
          crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
        };
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

クロスヘア オプション

以下のクロスヘア オプションを使用できます。

crosshair: { trigger: 'both' } フォーカスと選択の両方に表示
crosshair: { trigger: 'focus' } ピントが合っているディスプレイのみ
crosshair: { trigger: 'selection' } 選択項目にのみ表示
crosshair: { orientation: 'both' } 横方向と縦方向の両方の髪を表示します
crosshair: { orientation: 'horizontal' } 横髪のみ表示
crosshair: { orientation: 'vertical' } 縦向きの髪のみを表示
crosshair: { color: color_string } クロスヘアの色を color_string に設定します(例:'red' または '#f00'
crosshair: { opacity: opacity_number } クロスヘアの不透明度を opacity_number に設定して、0.0 を完全に透明、1.0 完全に不透明にします
crosshair: { focused: { color: color_string } } フォーカス時にクロスヘアの色を color_string に設定します
crosshair: { focused: { opacity: opacity_number } } フォーカス時にクロスヘアの不透明度を opacity_number に設定
crosshair: { selected: { color: color_string } } 選択時に十字の色を color_string に設定
crosshair: { selected: { opacity: opacity_number } } 選択時にクロスヘアの不透明度を opacity_number に設定