Descripción general
Una
Google Charts admite tres tipos de líneas de tendencia: lineales, polinómicas y exponenciales.
Líneas de tendencia lineales
Una línea de tendencia
En el siguiente gráfico, puedes ver una línea de tendencia lineal en un gráfico de dispersión que compara la antigüedad de los arces de azúcar con el diámetro de los troncos. Puedes desplazarte sobre la línea de tendencia para ver la ecuación calculada por Google Charts: 4.885 veces el diámetro + 0.730.
Para dibujar una línea de tendencia en un gráfico, usa la opción trendlines
y especifica qué series de datos se usarán:
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); }
Las líneas de tendencia lineales son el tipo más común. Sin embargo, a veces, una curva es la mejor para describir datos y, para eso, necesitamos otro tipo de línea de tendencia.
Líneas de tendencia exponenciales
Si tus datos se explican mejor con un exponente de la forma eax+b, puedes usar el atributo type
para especificar una línea de tendencia
Nota: A diferencia de las líneas de tendencia lineales, existen varias formas de calcular líneas de tendencia exponenciales. En este momento, solo proporcionamos un método, pero admitiremos más en el futuro, por lo que es posible que cambie el nombre o el comportamiento de la línea de tendencia exponencial actual.
En este gráfico, también usamos visibleInLegend: true
para mostrar la curva exponencial en la leyenda.
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); }
Cómo cambiar el color
De forma predeterminada, las líneas de tendencia tienen el mismo color que la serie de datos, pero es más claro. Puedes anular esa opción con el atributo color
.
Aquí, graficamos cuántos dígitos de π se calcularon por año durante un período fructífero desde el punto de vista informático, coloreando el color exponencial con verde.
Esta es la especificación de las líneas de tendencia:
trendlines: { 0: { type: 'exponential', color: 'green', } }
Líneas de tendencia polinómicas
Para generar una línea de tendencia polinómica, especifica los tipos polynomial
y degree
. Úsalos con precaución, ya que a veces pueden generar resultados engañosos. En el siguiente ejemplo, en el que un conjunto de datos bastante lineal se traza con una línea de tendencia cúbica (grado 3):
Ten en cuenta que la parcela después del último dato solo es visible porque artificialmente extendimos el eje horizontal a 15. Si no se configurara hAxis.maxValue como 15, se vería así:
Los mismos datos, el mismo polinomio, una ventana diferente en los datos.
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>
Cómo cambiar la opacidad y el ancho de línea
Puedes cambiar la transparencia de la línea de tendencia si configuras opacity
en un valor entre 0.0 y 1.0, y el ancho de la línea si configuras la opción lineWidth
.
trendlines: { 0: { color: 'purple', lineWidth: 10, opacity: 0.2, type: 'exponential' } }
La opción lineWidth
será suficiente para la mayoría de los usos, pero si te gusta, hay una opción pointSize
que se puede usar para personalizar el tamaño de los puntos seleccionables dentro de la línea de tendencia:
Al igual que la luz es tanto una onda como una partícula, una línea de tendencia es una línea y varios puntos. Lo que ven los usuarios depende de cómo interactúan con ella: normalmente una línea, pero cuando se desplazan sobre la línea de tendencia, se destaca un punto en particular. Ese punto tendrá un diámetro igual a:
- la línea de tendencia
pointSize
, si está definida; de lo contrario... - el
pointSize
global si está definido; de lo contrario... - 7
Sin embargo, si configuras la opción global o la línea de tendencia pointSize
, se mostrarán todos los puntos seleccionables, independientemente de la lineWidth
de la línea de tendencia.
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>
Cómo hacer que los puntos sean visibles
Las líneas de tendencia están fabricadas con un sello de varios puntos en el gráfico. La opción pointsVisible
de la línea de tendencia determina si los puntos de una línea de tendencia específica son visibles. La opción predeterminada para todas las líneas de tendencia es true
, pero si quieres desactivar la visibilidad de puntos en la primera línea de tendencia, configura trendlines.0.pointsVisible: false
.
En el siguiente gráfico, se muestra cómo controlar la visibilidad de los puntos según cada línea de tendencia.
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>
Cómo cambiar la etiqueta
De forma predeterminada, si seleccionas visibleInLegend
, la etiqueta revela la ecuación de la línea de tendencia. Puedes usar labelInLegend
para especificar una etiqueta diferente. Aquí, mostramos una línea de tendencia para cada una de las dos series y configuramos las etiquetas de la leyenda como "Línea de errores" (para la serie 0) y "Línea de prueba" (serie 1).
trendlines: { 0: { labelInLegend: 'Bug line', visibleInLegend: true, }, 1: { labelInLegend: 'Test line', visibleInLegend: true, } }
Correlaciones
El coeficiente de determinación, llamado R2 en las estadísticas, identifica el nivel de coincidencia de los datos con una línea de tendencia. Una correlación perfecta es de 1.0, y una anticorrelación perfecta es de 0.0.
Puedes representar a R2 en la leyenda del gráfico si configuras la opción showR2
en 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>