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?Wie man Zeile auf Google Liniendiagramm klickbar macht
3
A
Antwort
2
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>
Verwandte Themen
- 1. Wie man ein Relativayout klickbar macht?
- 2. Wie "Select" Ereignis auf Google Liniendiagramm auslösen?
- 3. Wie man eine Zelle klickbar macht und den Wert zurückgibt
- 4. Google Liniendiagramm: Wie fügt man Einheiten hinzu?
- 5. Google Liniendiagramm Overlating Tooltip
- 6. Wie macht man Google Link Chart Dynamisch
- 7. Google Liniendiagramm-Materialkurve
- 8. MVC 3 Webgrid machen ganze Zeile klickbar
- 9. Google Liniendiagramm: gestrichelter Bereich
- 10. Wie ändert man das Datumsformat in Google Material Design Liniendiagramm?
- 11. wie man großes Bild klickbar auf verschiedenen verschiedenen Bild Teil
- 12. Wie zeichne Liniendiagramm mit Google-Karten
- 13. Wie man ein ListActivity-Element mit vielen Ansichten im Inneren klickbar macht
- 14. google Liniendiagramm mit SQL datetime
- 15. Wie man Höhe Auto auf Colorbox macht?
- 16. Google-like Stock Chart/Liniendiagramm
- 17. Wie macht man darunterliegende div unclickable?
- 18. Wie macht man das Freigabesymbol in einer Zeile?
- 19. Gestrichelte Linien für ein Google Liniendiagramm
- 20. So schreiben Sie Ihre eigenen Legenden für Google Liniendiagramm/Google Liniendiagramm Legendenmanipulation
- 21. Android wie klickbar logo icon in actionbar?
- 22. ganze Reihe eines Wickets datierbar klickbar machen
- 23. Google Maps: Wie man benutzerdefinierte Markierungen wie Airbnb macht?
- 24. Highcharts Liniendiagramm von einer Google-Tabelle
- 25. Wie macht man Google-Test-Klassen Freunde mit meinen Klassen?
- 26. Wie macht Google Test Testsequenz
- 27. Wie man eine Fotogalerie auf Android macht?
- 28. Sortieren von Daten auf X-Achse in Google Liniendiagramm
- 29. Wie man Zahlenauswahldialog macht?
- 30. Wie man Datumsumwandlung macht?
, dass genau das, was ich brauche. Danke, WhiteHat – Rob
Shoot, habe es gerade auf meinem Code versucht und es sieht aus, als ob es nicht genau das ist, was ich suche. Ich habe mehrere Zeilen und dies zeigt die Kategorien für alle Zeilen gleichzeitig. Ich habe vor, verschiedene Klickaktionen für jede Zeile zu haben. Entschuldigung, ich hätte klarer sein sollen. – Rob
das ist ein Nachteil, und ist unvermeidlich mit 'focusTarget: 'Kategorie''. Siehe __EDIT__ für eine andere Option ... – WhiteHat