Google Charts工具提示选项

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

如果要设置默认工具提示的样式,而不提供自定义工具提示,

添加以下配置选项

tooltip: {isHtml: true}

那么你将能够使用以下css选择器

.google-visualization-tooltip

如果您需要设置已经由谷歌定义的内容的样式,
您可能需要通过使用来增加特异性!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>