1
Googleチャートで折れ線グラフ上の各セリットごとに異なるツールチップカラーを定義するにはどうすればよいですか？私は1つが緑色で、もう1つは黒色ですが、シリーズにどのように色を付けるかはわかりません。Googleチャートで折れ線グラフ上の各セリに異なるツールチップカラーを定義するにはどうすればよいですか？
<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>