Google 图表工具提示选项答案

【问题标题】：Google Charts tooltip optionsGoogle 图表工具提示选项
【发布时间】：2016-10-25 21:26:45
【问题描述】：

我是 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);
}

【问题讨论】：

标签： javascript html css charts google-visualization

【解决方案1】：

如果您想设置默认工具提示的样式，而不提供自定义工具提示，

添加以下配置选项

tooltip: {isHtml: true}

那么你就可以使用下面的css选择器了

.google-visualization-tooltip

如果您需要设置 google 已经定义的样式，
您可能需要使用!important 来增加特异性，
取决于您的 css 的定义方式/位置

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

.google-visualization-tooltip span

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

请参阅以下工作 sn-p...

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>

【讨论】：

感谢 WhiteHat，您随时为我提供了帮助，您的所有解决方案都非常有效！不能再感谢你了！要开始学习JS了

【解决方案2】：

// Add a new column for storing tooltip properties to the end
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
..
..   
// Now the rows you add will have this new property set. last column
// You will need to do this for remaining rows as required
[new Date(2015 , 03 , 15),0.000125,createCustomHTMLContent('blue',0.000125)],


//This is the function that will return html formatted tooltip.
//only sample. you will need to make changes according to your needs
function createCustomHTMLContent(color, number) {
  return '<div style="padding:5px 5px 5px 5px;background-color:"+ color + ";"><span>' +  number + "</span></div>"
}

这可能会有所帮助Annotate and Tooltip

【讨论】：