Question

我使用谷歌图表API v44，我发现了一些看起来像个bug的东西。在图例中，当条目名称太长时，您可以看到具有此名称的工具提示。但在Fedora下的Firefox中它变得不可读，因为字体颜色和背景颜色是相同的：

我决定使用CSS，就像这样：.goog-tooltip { color: white; }它就行了，但后来我发现它现在在我的Mac上坏了：

我尝试了.goog-tooltip { color: white; background-color: black; }，但它改变了背景而不是工具提示本身，而是改变了他的边界。

如何自定义字体/背景颜色以使工具提示随处可读？

如果您需要源代码：HTML，JS，CSS

Answer 1

有几个选项，请参阅以下示例图表...

图表0
您可以使用tooltip.textStyle configuration option
但是，这只允许您使用以下选项设置文本样式，无背景...

color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean>

图表1
您可以通过在数据

中提供工具提示列来提供自己的HTML / CSS

data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

并在选项中设置tooltip.isHtml: true

有关详细信息，请参阅Customizing HTML content ...

示例......

google.charts.load('current', {
  callback: function () {
    // data table
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',       2],
      ['Commute',   2],
      ['Watch TV',  2],
      ['Sleep',     7]
    ]);

    // chart 0
    new google.visualization.PieChart(document.getElementById('piechart0')).draw(data, {
      title: 'chart 0',
      tooltip: {
        textStyle: {
          color: 'deeppink',
          fontName: 'Verdana',
          fontSize: 16,
          bold: true,
          italic: true
        }
      }
    });

    // build tooltip column
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      data.setValue(i, 2,
        '<div class="goog-tooltip"><div class="goog-tooltip-task">' +
        data.getValue(i, 0) + '</div><div class="goog-tooltip-value">' +
        data.getValue(i, 1) + '</div></div>'
      );
    }

    // chart 1
    new google.visualization.PieChart(document.getElementById('piechart1')).draw(data, {
      title: 'chart 1',
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});

.goog-tooltip {
  background-color: black;
  padding: 6px 6px 6px 6px;
}

.goog-tooltip-task {
  color: cyan;
  font-size: 20px;
  font-weight: normal;
}

.goog-tooltip-value {
  color: gold;
  font-size: 16px;
  font-weight: bold;
}

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

PieChart：如何正确修复不可读的工具提示？

1 个答案: