google charts html tooltip ausgabe

Question

Wenn ich einen Punkt im Diagramm auswähle, ist Tooltip html Inhalt korrekt, aber wenn 2 und mehr Punkte ausgewählt werden, werden Tooltips in einem zusammengeführt und HTML von jedem ist sichtbar. Weiß smbd, was ich falsch mache? Kann smbd mir helfen?

var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Time'); 

    data.addColumn('number' , "id"); 
    data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}}); 

    var dataArray = []; 

    tooltipContent = "<div class='google-chart-tooltip'><center class='google-chart-tooltip-date'>Date: " + date + "</center><br /><p>Value1: " + value1 + ";<br />Value2: " + value2 + ".</p></div>"; 

    //fill dataArray 

    data.addRows(dataArray); 
} 
var currentChartOptions = { 
    tooltip: { 
    isHtml: true, 
    trigger: 'selection' 
    }, 
    selectionMode: 'multiple', 
    interpolateNulls: true, 
    hAxis: { 
    title: 'Time' 
    }, 
    vAxis: { 
     title: "Values" 
    } 
}; 

Folgt ein Bild der Ausgabe:

Answer 1

wie ein Fehler aussieht, aus dem, was ich sagen kann, Code

gut aussieht gibt es keine fehlenden Optionen oder ähnliches

und es ist leicht repliziert, wie im folgenden Beispiel

Sie aggregationTarget: 'none' verwenden könnte jede Tooltip zu zwingen gezeigt separat

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Time'); 
 
    data.addColumn('number' , 'id'); 
 
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}}); 
 

 
    var dataArray = [ 
 
     [new Date(2016, 11, 18), 1000, 400], 
 
     [new Date(2016, 11, 19), 1170, 1170], 
 
     [new Date(2016, 11, 20), 660, 1120], 
 
     [new Date(2016, 11, 21), 1030, 540] 
 
    ]; 
 

 
    dataArray.forEach(function (row) { 
 
     data.addRow([ 
 
     row[0], 
 
     row[1], 
 
     '<div class="google-chart-tooltip"><center class="google-chart-tooltip-date">Date: ' + row[0] + '</center><br /><p>Value1: ' + row[1] + ';<br />Value2: ' + row[2] + '.</p></div>' 
 
     ]); 
 
    }); 
 

 
    var currentChartOptions = { 
 
     aggregationTarget: 'none', 
 
     tooltip: { 
 
     isHtml: true, 
 
     trigger: 'selection' 
 
     }, 
 
     selectionMode: 'multiple', 
 
     interpolateNulls: true, 
 
     hAxis: { 
 
     title: 'Time' 
 
     }, 
 
     vAxis: { 
 
     title: 'Values' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, currentChartOptions); 
 
    }, 
 
    packages:['corechart'] 
 
});

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

werden