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>

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

这可能有所帮助Annotate and Tooltip

Google Charts工具提示选项

2 个答案: