javascript - Google 图表工具提示选项

Question

我是 Javascript 的新手，但我的客户想要不同的工具提示背景、边框和文本颜色。因为我是新手，所以我不知道应该更改什么或输入代码。先感谢您! (样式适用于悬停时生成的工具提示，而不是添加额外的工具提示)

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');


data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],

]);
var options = {
hAxis: {
  title: 'Time',
  textStyle:{color: '#FFF'},
  titleTextStyle: {
color: '#fff'
}
},
vAxis: {
  title: 'Value',
  textStyle:{color: '#FFF'},
  titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],


};

 var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}

Answer 1

如果你想在不提供自定义工具提示的情况下设置默认工具提示的样式，

添加以下配置选项

工具提示:{isHtml: true}

然后你就可以使用下面的css选择器了

.google-visualization-tooltip

如果您需要为 google 已经定义的内容设置样式，
您可能需要通过使用 !important,
来提高特异性 取决于您的 css 的定义方式/位置

您可能还需要添加额外的选择器，具体取决于要设置样式的元素，例如...

.google-visualization-tooltip span

您可以使用大多数浏览器的开发者工具中的“元素”选项卡，
调查工具提示中使用的当前 html 标记和样式。
添加 tooltip: {trigger: 'selection'} 以在调查时将工具提示锁定到位

请参阅以下工作片段...

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');


data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],

]);
var options = {
hAxis: {
  title: 'Time',
  textStyle:{color: '#FFF'},
  titleTextStyle: {
color: '#fff'
}
},
vAxis: {
  title: 'Value',
  textStyle:{color: '#FFF'},
  titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],
// use html tooltips
tooltip: {isHtml: true}

};

 var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

.google-visualization-tooltip {
  background-color: yellow !important;
  border: 2px solid cyan !important;
}

.google-visualization-tooltip span {
  color: magenta !important;
} 

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