概要
トレンドラインはグラフに重ねて表示される線で、データの全体的な方向性を示します。
Google グラフでは、線形、多項式、指数の 3 種類のトレンドラインがサポートされています。
線形トレンドライン
以下のグラフでは、カエデの樹齢と幹の直径を比較した散布図上の線形トレンドラインを確認できます。トレンドラインにカーソルを合わせると、Google グラフで計算された方程式（直径の 4.885 倍 + 0.730）が表示されます。
グラフにトレンドラインを描画するには、trendlines オプションを使用して、使用するデータ系列を指定します。
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
線形トレンドラインは最も一般的なタイプのトレンドラインです。ただし、曲線がデータの説明に最適な場合もあります。そのためには、別のタイプのトレンドラインが必要になります。
指数関数的なトレンドライン
データが eax+b という形式の指数で最もよく説明される場合は、次に示すように、type 属性を使用して指数
注: 線形トレンドラインとは異なり、指数トレンドラインはさまざまな方法で計算できます。現時点では 1 つのメソッドのみをサポートしていますが、今後サポートを拡大する予定です。そのため、現在の指数トレンドラインの名前や動作は変更される可能性があります。
また、このグラフでは visibleInLegend: true を使用して、凡例に指数曲線を表示しています。
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Generation', 'Descendants'],
[0, 1], [1, 33], [2, 269], [3, 2013]
]);
var options = {
title: 'Descendants by Generation',
hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
trendlines: {
0: {
type: 'exponential',
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
色の変更
デフォルトでは、トレンドラインはデータ系列と同じ色ですが明るい色で表示されます。これは color 属性でオーバーライドできます。ここでは、計算量の多い期間に年別に計算された円周率の桁数をグラフ化し、指数トレンドラインを緑色にしています。
トレンドラインの仕様は次のとおりです。
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
多項式トレンドライン
多項式のトレンドラインを生成するには、polynomial 型と degree 型を指定します。誤解を招く結果につながる可能性があるため、慎重に使用してください。以下の例では、ほぼ線形のデータセットが 3 次（次数 3）のトレンドラインでプロットされています。
なお、最後のデータポイントより後の急減は、横軸を人為的に 15 まで伸ばしたため、しか表示されません。hAxis.maxValue を 15 に設定しない場合、次のようになります。
同じデータ、同じ多項式、データに対する異なるウィンドウ。
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
<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([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
不透明度と線の幅を変更する
トレンドラインの透明度を変更するには、opacity を 0.0 ～ 1.0 の値に設定し、線の幅を lineWidth オプションに設定します。
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
ほとんどの場合は lineWidth オプションで十分ですが、好みに合う場合は pointSize オプションを使って、トレンドライン内の選択可能なドットのサイズをカスタマイズできます。
光が波でもあり粒子でもあるように、トレンドラインは線でもあり、点の集合でもあります。表示される内容は、操作方法によって異なります。通常は線が表示されますが、トレンドラインにカーソルを合わせると、特定のポイントがハイライト表示されます。この地点の直径は次のようになります。
- トレンドラインが定義されている場合は
pointSize、それ以外は... - グローバル
pointSize（定義されている場合）、それ以外の場合は... - 7
ただし、グローバルまたはトレンドラインの pointSize オプションを設定すると、トレンドラインの lineWidth に関係なく、選択可能なすべてのポイントが表示されます。
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
<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([
['X', 'Y'],
[0, 4],
[1, 2],
[2, 4],
[3, 6],
[4, 4]
]);
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
colors: ['#703583'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
</body>
</html>
要点を可視化する
トレンドラインは、グラフ上に多数の点を表示することで構成されます。トレンドラインの pointsVisible オプションでは、特定のトレンドラインのポイントを表示するかどうかを指定します。すべてのトレンドラインのデフォルト オプションは true ですが、最初のトレンドラインで点の表示をオフにする場合は trendlines.0.pointsVisible: false を設定します。
下のグラフは、トレンドラインごとにポイントの表示を管理する方法を示しています。
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
<html>
<head>
<meta charset="utf-8"/>
<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([
['X', 'Y', 'Z'],
[0, 4, 5],
[1, 2, 6],
[2, 4, 8],
[3, 6, 10],
[4, 4, 11],
[5, 8, 13],
[6, 12, 15],
[7, 15, 19],
[8, 25, 21],
[9, 34, 23],
[10, 50, 27]
]);
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
ラベルの変更
デフォルトでは、[visibleInLegend] を選択すると、トレンドラインの方程式がラベルに表示されます。labelInLegend を使用して別のラベルを指定できます。ここでは、2 つの系列のそれぞれのトレンドラインを表示し、凡例のラベルを「Bug line」（系列 0）と「Test line」（系列 1）に設定します。
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
相関関係
決定係数（統計では R2 と呼ばれます）は、トレンドラインがデータと一致する度合いを示します。完全な相関は 1.0、完全な反相関は 0.0 です。
showR2 オプションを true に設定すると、グラフの凡例に R2 を描画できます。
<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([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
hAxis: {minValue: 0, maxValue: 15},
vAxis: {minValue: 0, maxValue: 15},
chartArea: {width:'50%'},
trendlines: {
0: {
type: 'linear',
showR2: true,
visibleInLegend: true
}
}
};
var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
chartLinear.draw(data, options);
options.trendlines[0].type = 'exponential';
options.colors = ['#6F9654'];
var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
chartExponential.draw(data, options);
}
</script>
</head>
<body>
<div id="chartLinear" style="height: 350px; width: 800px"></div>
<div id="chartExponential" style="height: 350px; width: 800px"></div>
</body>
</html>