1
如何在谷歌图表的折线图上为每个系列定义不同的工具提示颜色？我希望一个是绿色的，另一个是黑色的，但不知道如何将颜色与系列相关联。如何在谷歌图表的折线图上为每个系列定义不同的工具提示颜色？
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
// it must follow data - tooltip - data tooltip
data.addColumn('number', 'General');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Filter');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
[new Date(2016, 06, 16), 29.0, '29.0', 28.0, '28.0', ''],
[new Date(2016, 07, 13), 12.2, '12.2', 10.2, '10.2', ''],
[new Date(2016, 08, 10), 5.1, '5.1', 3.1, '3.1', ''],
[new Date(2016, 09, 08), 4.9, '4.9', 4.0, '4.0', ''],
[new Date(2016, 10, 05), 6.2, '6.2', 4.2, '4.2', ''],
[new Date(2016, 11, 03), 6.1, '6.1', 28.0, '28.0', ''],
[new Date(2016, 11, 31), 24.7, '24.7', 8.0, '8.0', ''],
[new Date(2017, 00, 28), 24.8, '24.8', 8.0, '8.0', ''],
[new Date(2017, 01, 25), 6.1, '6.1', 2.0, '2.0', ''],
[new Date(2017, 02, 25), 5.3, '5.3', 8.0, '8.0', ''],
[new Date(2017, 03, 22), 4.0, '4.0', 8.0, '8.0', ''],
[new Date(2017, 04, 20), 4.0, '4.0', 2.0, '2.0', '4.0']
]);
var options = {
legend: 'none',
pointSize: 7,
tooltip: {isHtml: true}, // CSS styling affects only HTML tooltips.
chart: {
title: '',
subtitle: ''
},
width: 650,
height: 230,
chartArea: {'width': '92%', 'height': '88%'},
hAxis: {
format: 'M/d/yy',
gridlines: {color: 'none'},
ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
textStyle: {
color: 'black', // any HTML string color ('red', '#cc00cc')
fontName: 'PT Sans', // i.e. 'Times New Roman'
fontSize: 10 // 12, 18 whatever you want (don't specify px)
}
},
vAxis: {
format: 'decimal',
gridlines: {color: 'none'},
ticks: [0,5,10,15,20,25,30],
textStyle: {
color: 'black', // any HTML string color ('red', '#cc00cc')
fontName: 'PT Sans', // i.e. 'Times New Roman'
fontSize: 10 // 12, 18 whatever you want (don't specify px)
},
minValue: 0
},
colors: ['#000000','#39b54a']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<style>
div.google-visualization-tooltip { background: #000; font-family: 'PT Sans', sans-serif!important; text-align: center!important; padding: 0px!important; }
div.google-visualization-tooltip > ul > li > span {color: #FFF!important; font-size: 12px!important; text-align: right!important; margin: 0px!important; }
</style>
<div id="chart_div" style="width: 650px; height: 230px;"></div>
</body>
</html>