PieChart：如何正確解決不可讀的工具提示？

Question

我使用的是Google Charts 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.textStyleconfiguration option
但是，這隻允許您使用以下選項設置文字風格，無背景...

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

圖1
您可以通過在數據

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

和設置的選項

欲瞭解更多信息tooltip.isHtml: true提供一個提示欄提供自己的HTML/CSS，見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>