Wie man Zeile auf Google Liniendiagramm klickbar macht

Question

Ich möchte ein Google Liniendiagramm mit einer anklickbaren Linien machen, aber ich scheine nur in der Lage, die Datenpunkte anklickbar zu machen. Ist es möglich, die Linie zwischen den Datenpunkten auch anklickbar zu machen?

Answer 1

Option Gebrauch Config focusTarget: 'category'

, wenn die Leitung angeklickt wird, wird der nächste Punkt ausgewählt werden.

obwohl, in meinem aktuellen Browser, muss ich den Punkt der Maus halten,
~ 2px über der Linie, bevor es mich klicken lassen.

aber es funktioniert im Vergleich zu focusTarget: 'datum',
, die nur der Punkt erlaubt

angeklickt werden siehe folgende, Schnipsel arbeiten ...

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

wenn focusTarget: 'category' nicht funktioniert,
eine weitere Option, die verwenden wäre 'click'event

obwohl nichts fokussiert ist noch ein Tooltip angezeigt, die Linie noch anklickbar.
aber die Position des Klicks muss ziemlich genau sein.
Sie targetID verwenden können, um festzustellen, was/die Linie geklickt wurde ...

siehe folgende Schnipsel ...

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>