Обзор
А
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>