Légende et l'axe infobulle est livré avec la boîte noire avec carte Google (Firefox

Question

Je travaille actuellement sur les cartes Google avec la version ci-dessous

google.charts.load ('à venir', {paquets:. [ 'Corechart']);

Quand j'entre une souris sur l'axe et infobulle légende est livré avec la boîte noire comme par image ci-jointe

J'ai aussi essayé « actuel » et « 42 » version, mais toujours obtenir un même. émettre comme en pièce jointe image ed. Je suis confronté à ce problème avec Firefox.

Google Line Chart- Tooltip with balck box in Firefox

Est-ce un bug dans Google Chart API ou autre chose?

Answer 1

infobulle semble fonctionner très bien ici

toutes les options code/css/vous pouvez partager?

---

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'x', label: 'Date', type: 'date'}, 
 
     {id: 'y', label: 'Fn', type: 'number'}, 
 
     {id: 'z', label: 'Shade', type: 'number'} 
 
    ] 
 
    }); 
 

 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'MMM-dd-yyyy' 
 
    }); 
 

 
    var oneDay = (1000 * 60 * 60 * 24); 
 
    var startDate = new Date(2016, 10, 27); 
 
    var endDate = new Date(); 
 
    var ticksAxisH = []; 
 
    var dateRanges = [ 
 
    {start: new Date(2017, 0, 1), end: new Date(2017, 0, 20)}, 
 
    {start: new Date(2017, 1, 5), end: new Date(2017, 1, 10)} 
 
    ]; 
 
    var maxShade = 200; 
 
    for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) { 
 
    // x = date 
 
    var rowDate = new Date(i); 
 
    var xValue = { 
 
     v: rowDate, 
 
     f: formatDate.formatValue(rowDate) 
 
    }; 
 

 
    // y = 2x + 8 
 
    var yValue = (2 * ((i - startDate.getTime())/oneDay) + 8); 
 

 
    // z = null or max shade 
 
    var zValue = null; 
 
    dateRanges.forEach(function (range) { 
 
     if ((rowDate.getTime() >= range.start.getTime()) && 
 
      (rowDate.getTime() <= range.end.getTime())) { 
 
     zValue = maxShade; 
 
     } 
 
    }); 
 

 
    // add data row 
 
    dataTable.addRow([ 
 
     xValue, 
 
     yValue, 
 
     zValue 
 
    ]); 
 

 
    // add tick every 7 days 
 
    if (((i - startDate.getTime()) % 7) === 0) { 
 
     ticksAxisH.push(xValue); 
 
    } 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'ComboChart', 
 
    dataTable: dataTable, 
 
    options: { 
 
     chartArea: { 
 
     bottom: 64, 
 
     top: 48 
 
     }, 
 
     hAxis: { 
 
     slantedText: true, 
 
     ticks: ticksAxisH 
 
     }, 
 
     legend: { 
 
     position: 'top' 
 
     }, 
 
     lineWidth: 4, 
 
     series: { 
 
     // line 
 
     0: { 
 
      color: '#00acc1' 
 
     }, 
 
     // area 
 
     1: { 
 
      areaOpacity: 0.6, 
 
      color: '#ffe0b2', 
 
      type: 'area', 
 
      visibleInLegend: false 
 
     }, 
 
     }, 
 
     seriesType: 'line' 
 
    } 
 
    }); 
 

 
    chart.draw(container); 
 
}

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