Gibt es eine Lösung für das Überschneiden von zwei Linien in Google Charts api zeigt Informationen für beide Linien?

I api google Diagramme für einige graph.following verwende ist Code, die ichGibt es eine Lösung für das Überschneiden von zwei Linien in Google Charts api zeigt Informationen für beide Linien?

<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 = google.visualization.arrayToDataTable([ 
 
      ['Year', 'Sales', 'Expenses'], 
 
      ['2004', 1000,  400], 
 
      ['2005', 1170,  1170], 
 
      ['2006', 660,  1120], 
 
      ['2007', 1030,  540], 
 
\t ['2008', 660,  660], 
 
      ['2009', 1030,  540] 
 
     ]); 
 

 
     var options = { 
 
      title: 'Company Performance', 
 
      curveType: 'function', 
 
      legend: { position: 'bottom' } 
 
     }; 
 

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

 
     chart.draw(data, options); 
 
     } 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="curve_chart" style="width: 900px; height: 500px"></div> 
 
    </body> 
 
</html>

bin mit

wo zwei Linien einander zweimal schneiden sich und wegen dass es Informationen zeigt nur für eine Zeile. Gibt es eine Möglichkeit, so dass ich Informationen für beide Linien anzeigen kann, wenn der Cursor über diesem Punkt ist?

Quelle

2016-06-08 suraha

Versuchen Sie es mit ...

focusTarget: 'category'

im configuration options, siehe folgendes Beispiel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses'], 
 
     ['2004', 1000,  400], 
 
     ['2005', 1170,  1170], 
 
     ['2006', 660,  1120], 
 
     ['2007', 1030,  540], 
 
     ['2008', 660,  660], 
 
     ['2009', 1030,  540] 
 
    ]); 
 

 
    new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, { 
 
     focusTarget: 'category', 
 
     title: 'Company Performance', 
 
     curveType: 'function', 
 
     legend: { position: 'bottom' } 
 
    }); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

EDIT

wäre eine weitere Option, Ihre eigenen Tooltip

siehe folgendes Beispiel zur Verfügung zu stellen, ziemlich einfach, aber zeigt die Logik ...

ein Tooltip Spalte hinzuzufügen, nach jeder Spalte Wert

dann den Tooltip Spalte füllen mit einer hTML-Zeichenfolge

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses'], 
 
     ['2004', 1000,  400], 
 
     ['2005', 1170,  1170], 
 
     ['2006', 660,  1120], 
 
     ['2007', 1030,  540], 
 
     ['2008', 660,  660], 
 
     ['2009', 1030,  540] 
 
    ]); 
 

 
    // add tooltip columns 
 
    data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}}); 
 
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}}); 
 

 
    // build tooltip values 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     data.setValue(i, 2, getTooltip(i, 1, 3)); 
 
     data.setValue(i, 4, getTooltip(i, 3, 1)); 
 
    } 
 

 
    // set tooltip content 
 
    function getTooltip(row, col1, col2) { 
 
     var tooltip = '<div class="tooltipLabel">' + data.getValue(row, 0) + '</div>'; 
 
     tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col1) + '</span>: ' + data.getValue(row, col1) + '</div>'; 
 
     if (data.getValue(row, col1) === data.getValue(row, col2)) { 
 
     tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col2) + '</span>: ' + data.getValue(row, col2) + '</div>'; 
 
     } 
 
     return tooltip; 
 
    } 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
     curveType: 'function', 
 
     legend: { position: 'bottom' }, 
 
     pointSize: 5, 
 
     tooltip: { 
 
     isHtml: true 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

div { 
 
    padding: 6px 6px 6px 6px; 
 
    font-name: Arial; 
 
} 
 

 
.tooltipLabel { 
 
    font-weight: bold; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Quelle

2016-06-08 18:45:09 WhiteHat

Danke Mann, es funktioniert. Aber ist es möglich, einzelnes Feld von Informationen nur für geschnittene Linien zu zeigen und für andere sollte es getrennt sein? – suraha

nicht über die Option config, müsste benutzerdefinierte Tooltip Inhalt erstellen – WhiteHat

Ja. Ich meine, wie nicht verstehen, wie Logik für dieses Szenario zu bauen. Wenn Sie helfen könnten – suraha

Gibt es eine Lösung für das Überschneiden von zwei Linien in Google Charts api zeigt Informationen für beide Linien?

Antwort

Verwandte Themen