谷歌图表的工具提示选项

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

- OrangeBud

Answer 1

如果您想要样式化默认工具提示，而不提供自定义工具提示，则需要添加以下配置选项：tooltip: {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>

- WhiteHat

---

谢谢WhiteHat，你随时帮助了我，你的所有解决方案都比完美还要好！无法更感激你！得开始学习JS了。 - OrangeBud

Answer 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>"
}

这可能会有所帮助 注释和工具提示

- Searching