Googleの図表のhtmlのツールチップの問題

Question

チャートのポイントを1つ選択すると、ツールチップのhtmlコンテンツは正しく表示されますが、2つ以上のポイントを選択するとツールチップが1つにマージされ、 smbdは私が間違っていることを知っていますか？私を助けることができますか？

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" 
    } 
}; 

は、問題の画像は、次のとおりです。

Answer 1

には不足しているオプションまたはそのようなものは存在しない私が言うことができるものから、コードは正常に見える

、バグのように見えます

以下の例のように簡単に複製できます。

あなたはそれぞれのツールチップを強制的に aggregationTarget: 'none'を使用することができ

は

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>

別々に表示します