Google チャートを使用した折れ線グラフの各シリーズごとに異なるツールチップの色を定義するにはどうすればよいですか? 1 つは緑、もう 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>
ツールチップで html / css スタイルを使用するには、2 つの設定が必要です...
まず、あなたが持っているチャートオプション...
tooltip: {isHtml: true}
htmlツールチップ列のプロパティも設定する必要があります...
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
次に、ツールチップ列の値に html を使用できます...
次の作業スニペットを参照してください...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'General');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn('number', 'Filter');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
[new Date(2016, 06, 16), 29.0, '<div class="general">29.0</div>', 28.0, '<div class="filter">28.0</div>', null],
[new Date(2016, 07, 13), 12.2, '<div class="general">12.2</div>', 10.2, '<div class="filter">10.2</div>', null],
[new Date(2016, 08, 10), 5.1, '<div class="general">5.1</div>', 3.1, '<div class="filter">3.1</div>', null],
[new Date(2016, 09, 08), 4.9, '<div class="general">4.9</div>', 4.0, '<div class="filter">4.0</div>', null],
[new Date(2016, 10, 05), 6.2, '<div class="general">6.2</div>', 4.2, '<div class="filter">4.2</div>', null],
[new Date(2016, 11, 03), 6.1, '<div class="general">6.1</div>', 28.0, '<div class="filter">28.0</div>', null],
[new Date(2016, 11, 31), 24.7, '<div class="general">24.7</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 00, 28), 24.8, '<div class="general">24.8</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 01, 25), 6.1, '<div class="general">6.1</div>', 2.0, '<div class="filter">2.0</div>', null],
[new Date(2017, 02, 25), 5.3, '<div class="general">5.3</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 03, 22), 4.0, '<div class="general">4.0</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 04, 20), 4.0, '<div class="general">4.0</div>', 2.0, '<div class="filter">2.0</div>', '4.0']
]);
var options = {
legend: 'none',
pointSize: 7,
tooltip: {isHtml: true},
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',
fontName: 'PT Sans',
fontSize: 10
}
},
vAxis: {
format: 'decimal',
gridlines: {color: 'none'},
ticks: [0,5,10,15,20,25,30],
textStyle: {
color: 'black',
fontName: 'PT Sans',
fontSize: 10
},
minValue: 0
},
colors: ['#000000', '#39b54a']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}.general {
background-color: #000000;
color: #ffffff;
padding: 4px;
}
.filter {
background-color: #39b54a;
color: #ffffff;
padding: 4px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加