2017-03-02 53 views
0

我目前正在對谷歌圖表下方版黑盒傳說和軸提示配備了與谷歌圖(火狐

google.charts.load(「即將到來的」,{包:[「corechart」] );

在i上軸和圖例工具提示輸入一個鼠標帶有黑盒按照附加的圖像

我還試圖「當前」「42」版本,但仍然獲得相同的。問題如附件ed圖像。我正在面對這個問題Firefox

Google Line Chart- Tooltip with balck box in Firefox

它是在谷歌圖表API或其他任何一個錯誤?

回答

0

提示似乎做工精細這裏

任何代碼/ CSS /圖表選項你可以分享?


看到下面的工作片段...

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>

+0

嗨,其實,有一個傳奇,軸提示的問題。現在解決了Page CSS和Google Chart CSS之間的衝突 –