Googleライングラフでラインをクリックする方法

Question

クリック可能なラインでGoogleラインチャートを作成したいが、データポイントをクリック可能にすることしかできないようだ。データポイント間の線をクリック可能にすることは可能ですか？

Answer 1

使用の設定オプションfocusTarget: 'category'

ラインがクリックされた場合、最も近い点が選択されます。

私の現在のブラウザでは、マウスのポイントを保持する必要があります。私はクリックする前に
〜2pxを上に置きます。

それだけでポイントが

以下、作業スニペットを参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y'); 
 
    data.addRows([ 
 
     [0, 0], 
 
     [6, 11], 
 
     [12, 30], 
 
     [18, 52], 
 
     [24, 60], 
 
     [30, 55], 
 
     [36, 62], 
 
     [42, 63], 
 
     [48, 72], 
 
     [54, 71], 
 
     [60, 64], 
 
     [66, 70] 
 
    ]); 
 

 
    // clickable line 
 
    new google.visualization.LineChart(document.getElementById('chart_div0')).draw(data, { 
 
     focusTarget: 'category' 
 
    }); 
 

 
    // point only 
 
    new google.visualization.LineChart(document.getElementById('chart_div1')).draw(data, { 
 
     focusTarget: 'datum' 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>click line</div> 
 
<div id="chart_div0"></div> 
 
<div>point only</div> 
 
<div id="chart_div1"></div>

EDIT

クリックすることができます focusTarget: 'datum'、
対動作しません

、focusTarget: 'category'がうまくいかない場合は別のオプションは何も重視されていないにもツールチップが表示されている、が、ラインがまだクリック可能である'click'event

を使用することです。
クリックの位置はかなり正確である必要があります。
あなたは私が必要とする正確に何だそれは

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X0'); 
 
    data.addColumn('number', 'Y0'); 
 
    data.addColumn('number', 'Y1'); 
 
    data.addRows([ 
 
     [0, 0, 0], 
 
     [6, 11, 7], 
 
     [12, 30, 13], 
 
     [18, 52, 19], 
 
     [24, 60, 25], 
 
     [30, 55, 31], 
 
     [36, 62, 37], 
 
     [42, 63, 43], 
 
     [48, 72, 49], 
 
     [54, 71, 55], 
 
     [60, 64, 61], 
 
     [66, 70, 67] 
 
    ]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div1')); 
 

 
    google.visualization.events.addListener(chart, 'click', function (props) { 
 
     if (props.targetID.indexOf('line') > -1) { 
 
     var hAxis = chart.getChartLayoutInterface().getHAxisValue(props.x); 
 
     var vAxis = chart.getChartLayoutInterface().getVAxisValue(props.y); 
 
     document.getElementById('chart_div0').innerHTML = props.targetID + ' clicked at [' + hAxis + ', ' + vAxis + ']'; 
 
     } 
 
    }); 
 

 
    chart.draw(data, { 
 
     lineSize: 3, 
 
     pointSize: 5 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div0">line click result shown here</div> 
 
<div id="chart_div1"></div>