はじめに

なかなか日本語のドキュメントが無く、苦労したためメモとして残します。

したいこと

Google Area Chartで
チャートの線(ストローク)を赤(red)、
塗りつぶしを薄いオレンジ(orange)に設定する。

optionにcolorというものがあるが、
線(ストローク)と塗りつぶしが同じ色になってしまって指定できなかった。

指定できていない例
1. 結果
改善方法
1. 結果
2. 参考サイト

指定できていない例

公式サンプルを例にしています。

<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>