Обзор
А
Google Charts поддерживает три типа линий тренда: линейные, полиномиальные и экспоненциальные.
Линейные линии тренда
А
На приведенной ниже диаграмме вы можете увидеть линейную линию тренда на точечной диаграмме, сравнивающую возраст сахарных кленов с диаметром их стволов. Вы можете навести указатель мыши на линию тренда, чтобы увидеть уравнение, рассчитанное Google Charts: 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);
}
Линейные линии тренда являются наиболее распространенным типом линий тренда. Но иногда кривая лучше всего подходит для описания данных, и для этого нам понадобится другой тип линии тренда.
Экспоненциальные линии тренда
Если ваши данные лучше всего объясняются экспонентой в форме e ax+b , вы можете использовать атрибут type для указания
Примечание. В отличие от линейных линий тренда, существует несколько различных способов расчета экспоненциальных линий тренда. Сейчас мы предоставляем только один метод, но в будущем будем поддерживать больше, поэтому возможно, что имя или поведение текущей экспоненциальной линии тренда изменится.
Для этой диаграммы мы также используем 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) линией тренда:
Обратите внимание, что отвес после последней точки данных виден только потому, что мы искусственно расширили горизонтальную ось до 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 , чтобы указать другую метку. Здесь мы отображаем линию тренда для каждой из двух серий, устанавливая метки в легенде на «Линия ошибки» (для серии 0) и «Тестовая линия» (серия 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Корреляции
Коэффициент детерминации , называемый в статистике R 2 , определяет, насколько точно линия тренда соответствует данным. Идеальная корреляция равна 1,0, а идеальная антикорреляция равна 0,0.
Вы можете отобразить R 2 в легенде диаграммы, установив для параметра showR2 значение 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 = {
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>