图例和轴工具提示带有带有谷歌图表的黑框（Firefox

Question

我目前正在使用以下版本的 Google 图表。

google.charts.load('upcoming', {packages: ['corechart']);

当我在轴上输入鼠标时，图例工具提示根据附加图像带有黑框。

我也尝试了 "Current" 和 "42" 版本，但仍然遇到与附图中相同的问题。我在使用 Firefox 时遇到了这个问题。

Google Line Chart- Tooltip with balck box in Firefox

这是 Google Chart API 中的错误还是其他任何问题？

Answer 1

工具提示在这里似乎可以正常工作

您可以分享任何代码/css/图表选项吗？

---

请参阅以下工作 sn-p...

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>