Google Area Chartで線と塗りつぶしの色を変更したい
はじめに
なかなか日本語のドキュメントが無く、苦労したためメモとして残します。
したいこと
Google Area Chartで チャートの線(ストローク)を赤(red)、 塗りつぶしを薄いオレンジ(orange)に設定する。
optionにcolorというものがあるが、 線(ストローク)と塗りつぶしが同じ色になってしまって指定できなかった。
指定できていない例
公式サンプルを例にしています。
<html>
<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 = google.visualization.arrayToDataTable([
['Year', 'price'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030],
]);
var options = { colors: ['orange'] };
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
結果
改善方法
<html>
<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 areaStyle = 'fill-color: orange; stroke-color: red;';
var dataTable = new google.visualization.DataTable({
cols: [
{ label: 'Year', type: 'string' },
{ label: 'price', type: 'number' },
{ role: 'style', type: 'string' },
],
rows: [
{ c: [{ v: '2013' }, { v: 1000 }, { v: areaStyle }] },
{ c: [{ v: '2014' }, { v: 1170 }, { v: areaStyle }] },
{ c: [{ v: '2015' }, { v: 660 }, { v: areaStyle }] },
{ c: [{ v: '2016' }, { v: 1030 }, { v: areaStyle }] },
],
});
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
結果
参考サイト
https://stackoverflow.com/questions/39409790/different-colour-of-fill-and-stroke-in-google-area-chart?rq=1
Discussion