1
Wie definiere ich eine unterschiedliche Tooltip-Farbe pro Serie in einem Liniendiagramm mit Google-Charts? Ich möchte, dass einer grün und der andere schwarz ist, aber ich bin mir nicht sicher, wie ich die Farben der Serie zuordnen soll.Wie definiere ich eine unterschiedliche Tooltip-Farbe pro Serie in einem Liniendiagramm mit Google-Charts?
<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>