Question

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

google.charts.load（＆＃39;即将推出＆＃39;，{packages：[＆＃39;核心图表＆＃39;]）;

当我在轴上输入鼠标时，图例工具提示会附带黑盒子，如附图所示。

我还尝试了＆＃34;当前＆＃34; 和＆＃34; 42＆＃34; 版本，但仍然遇到与附加图片相同的问题。我正在使用 Firefox 。

来解决此问题

Google Line Chart- Tooltip with balck box in Firefox

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

Answer 1

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

您可以分享的任何代码/ 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>

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

1 个答案: