Gráficos do Google - Guia rápido
Google Chartsé uma biblioteca de gráficos baseada em JavaScript puro destinada a aprimorar aplicativos da web, adicionando recursos de gráficos interativos. Ele oferece suporte a uma ampla variedade de gráficos. Os gráficos são desenhados usando SVG em navegadores padrão como Chrome, Firefox, Safari, Internet Explorer (IE). No legado do IE 6, VML é usado para desenhar os gráficos.
Características
A seguir estão os principais recursos da biblioteca de gráficos do Google.
Compatability - Funciona perfeitamente em todos os principais navegadores e plataformas móveis, como Android e iOS.
Multitouch Support- Suporta multitoque em plataformas baseadas em tela de toque, como Android e iOS. Ideal para smartphones / tablets baseados em iPhone / iPad e Android.
Free to Use - Código aberto e gratuito para uso não comercial.
Lightweight - a biblioteca principal loader.js, é uma biblioteca extremamente leve.
Simple Configurations - Usa json para definir várias configurações de gráficos e muito fácil de aprender e usar.
Dynamic - Permite modificar o gráfico mesmo após a geração do gráfico.
Multiple axes- Não restrito ao eixo x, y. Suporta vários eixos nos gráficos.
Configurable tooltips- A dica de ferramenta surge quando um usuário passa o mouse sobre qualquer ponto em um gráfico. googlecharts fornece um formatador integrado de dica de ferramenta ou formatador de retorno de chamada para controlar a dica de forma programática.
DateTime support- Lidar com data e hora especialmente. Fornece vários controles embutidos sobre categorias de datas sábias
Print - Imprimir gráfico usando a página da web.
External data- Suporta o carregamento de dados dinamicamente do servidor. Fornece controle sobre os dados usando funções de retorno de chamada.
Text Rotation - Suporta rotação de etiquetas em qualquer direção.
Tipos de gráficos suportados
A biblioteca de gráficos do Google oferece os seguintes tipos de gráficos -
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Line Charts Usado para desenhar gráficos baseados em linhas / splines. |
| 2 | Area Charts Usado para desenhar gráficos de área. |
| 3 | Pie Charts Usado para desenhar gráficos de pizza. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Usado para desenhar gráficos dispersos. |
| 5 | Bubble Charts Usado para desenhar gráficos baseados em bolhas. |
| 6 | Dynamic Charts Usado para desenhar gráficos dinâmicos onde o usuário pode modificar os gráficos. |
| 7 | Combinations Usado para desenhar combinações de vários gráficos. |
| 8 | 3D Charts Usado para desenhar gráficos 3D. |
| 9 | Angular Gauges Usado para desenhar gráficos do tipo velocímetro. |
| 10 | Heat Maps Usado para desenhar mapas de calor. |
| 11 | Tree Maps Usado para desenhar mapas de árvores. |
Nos próximos capítulos, discutiremos cada tipo de gráfico mencionado acima em detalhes com exemplos.
Licença
O Google Charts é de código aberto e de uso gratuito. Siga o link: Termos de Serviço .
Neste capítulo, discutiremos sobre como configurar a biblioteca Google Charts para ser usada no desenvolvimento de aplicativos da web.
Instale o Google Charts
Existem duas maneiras de usar o Google Charts.
Download - Baixe-o localmente em https://developers.google.com/chart e usá-lo.
CDN access- Você também tem acesso a um CDN. O CDN dará a você acesso em todo o mundo a centros de dados regionais que, neste caso, hospedam o Google Charthttps://www.gstatic.com/charts.
Usando o Google Chart baixado
Inclua o arquivo googlecharts JavaScript na página HTML usando o seguinte script -
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Usando CDN
Estamos usando as versões CDN da biblioteca de gráficos do Google neste tutorial.
Inclua o arquivo JavaScript do Google Chart na página HTML usando o seguinte script -
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>Neste capítulo, mostraremos a configuração necessária para desenhar um gráfico usando a API de gráficos do Google.
Etapa 1: Criar página HTML
Crie uma página HTML com as bibliotecas de gráficos do Google.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Aqui containerdiv é usado para conter o gráfico desenhado usando a biblioteca de gráficos do Google. Aqui, estamos carregando a versão mais recente da API corecharts usando o método google.charts.load.
Etapa 2: Criar configurações
A biblioteca de gráficos do Google usa configurações muito simples usando sintaxe json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Aqui, os dados representam os dados json e as opções representam a configuração que a biblioteca de gráficos do Google usa para desenhar um gráfico dentro do div de contêiner usando o método draw (). Agora vamos configurar os vários parâmetros para criar a string json necessária.
título
Configure as opções do gráfico.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabela de dados
Configure os dados a serem exibidos no gráfico. DataTable é uma coleção estruturada de tabela especial que contém os dados do gráfico. As colunas da tabela de dados representam as legendas e as linhas representam os dados correspondentes. O método addColumn () é usado para adicionar uma coluna onde o primeiro parâmetro representa o tipo de dados e o segundo parâmetro representa a legenda. O método addRows () é usado para adicionar linhas de acordo.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Etapa 3: desenhe o gráfico
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Exemplo
A seguir está o exemplo completo -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>O código a seguir chama a função drawChart para desenhar o gráfico quando a biblioteca do Google Chart é carregada completamente.
google.charts.setOnLoadCallback(drawChart);Resultado
Verifique o resultado.
Os gráficos de área são usados para desenhar gráficos baseados em área. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em área.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Área Básica Gráfico de área básico |
| 2 | Área com valores negativos Gráfico de área com valores negativos. |
| 3 | Área empilhada Gráfico com áreas empilhadas umas sobre as outras. |
| 4 | Área percentual Gráfico com dados em termos percentuais. |
| 5 | Área com pontos faltando Gráfico com pontos ausentes nos dados. |
| 6 | Eixos invertidos Área usando eixos invertidos. |
Os gráficos de barras são usados para desenhar gráficos baseados em barras. Nesta seção, discutiremos os seguintes tipos de gráficos baseados em barras.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Barra Básica Gráfico de barras básico |
| 2 | Gráfico de Barras Agrupadas Gráfico de barras agrupadas. |
| 3 | Barra Empilhada Gráfico de barras com barras empilhadas umas sobre as outras. |
| 4 | Barra empilhada negativa Gráfico de barras com pilha negativa. |
| 5 | Barra de porcentagem empilhada Gráfico de barras com dados em termos percentuais. |
| 6 | Gráfico de Barras de Materiais Um gráfico de barras inspirado no Material Design. |
| 7 | Gráfico de barras com rótulos de dados Gráfico de barras com rótulos de dados. |
Os gráficos de bolhas são usados para desenhar gráficos baseados em bolhas. Nesta seção, discutiremos os seguintes tipos de gráficos baseados em bolhas.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Bolha Básica Gráfico de bolhas básico. |
| 2 | Gráfico de bolhas com rótulos de dados Gráfico de bolhas com rótulos de dados. |
Os gráficos de calendário são usados para desenhar atividades ao longo de um longo período de tempo, como meses ou anos. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em calendário.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Calendário Básico Gráfico básico do calendário. |
| 2 | Calendário com cores personalizadas Gráfico de calendário personalizado. |
Os gráficos de velas são usados para mostrar o valor de abertura e fechamento sobre uma variação de valor e normalmente são usados para representar ações. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em velas.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Castiçal Básico Gráfico de velas básico. |
| 2 | Castiçal com cores personalizadas Gráfico de velas personalizado. |
Os gráficos de colunas são usados para desenhar gráficos baseados em colunas. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em colunas.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Coluna Básica Gráfico de colunas básicas. |
| 2 | Coluna Agrupada Gráfico de colunas agrupadas. |
| 3 | Coluna Empilhada Gráfico de colunas com colunas empilhadas umas sobre as outras. |
| 4 | Coluna Empilhada Negativa Gráfico de colunas com pilha negativa. |
| 5 | Porcentagem de coluna empilhada Gráfico de colunas com dados em termos percentuais. |
| 6 | Gráfico de coluna de material Um gráfico de colunas inspirado no Material Design. |
| 7 | Gráfico de colunas com rótulos de dados Gráfico de colunas com rótulos de dados. |
O gráfico de combinação ajuda a renderizar cada série como um tipo de marcador diferente da lista a seguir: linha, área, barras, velas e área escalonada. Para atribuir um tipo de marcador padrão para a série, use a propriedade seriesType. A propriedade da série deve ser usada para especificar as propriedades de cada série individualmente. Já vimos a configuração usada para desenhar este gráfico no capítulo Google Charts Configuration Syntax . Então, vamos ver o exemplo completo.
Configurações
Nós usamos ComboChart classe para mostrar o gráfico baseado em combinação.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Exemplo
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Resultado
Verifique o resultado.
Um histograma é um gráfico que agrupa dados numéricos em grupos, exibindo os grupos como colunas segmentadas. Eles são usados para representar a distribuição de um conjunto de dados e a frequência com que os valores se enquadram em intervalos. O Google Charts escolhe automaticamente o número de baldes para você. Todos os depósitos têm a mesma largura e altura proporcional ao número de pontos de dados no depósito. Os histogramas são semelhantes aos gráficos de colunas em outros aspectos. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em histograma.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Histograma Básico Gráfico de histograma básico. |
| 2 | Cor de controle Cor personalizada da carta do histrograma. |
| 3 | Controlando Buckets Baldes personalizados da carta do histrograma. |
| 4 | Multiple Series Gráfico de histrograma com várias séries. |
Os gráficos de linha são usados para desenhar gráficos baseados em linha. Nesta seção, discutiremos os seguintes tipos de gráficos baseados em linha.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Linha básica Gráfico de linha básico. |
| 2 | Com pontos visíveis Gráfico com pontos de dados visíveis. |
| 3 | Cor de fundo personalizável Gráfico com cor de fundo personalizada. |
| 4 | Cor de linha personalizável Gráfico com cor de linha personalizada. |
| 5 | Rótulos personalizáveis de eixo e escala Gráfico com rótulos personalizados de eixo e escala. |
| 6 | Crosshairs Gráficos de linha mostrando retículos no ponto de dados na seleção. |
| 7 | Estilo de linha personalizável Gráfico com cor de linha personalizada. |
| 8 | Gráficos de linha com linhas curvas Gráfico com linhas curvas suaves. |
| 9 | Gráfico de linha de material Um gráfico de linhas inspirado no Material Design. |
| 10 | Top X Line Chart Um gráfico de linhas inspirado no Material Design com o eixo X no topo do gráfico. |
Um gráfico do Google Maps usa a API do Google Maps para exibir o mapa. Os valores dos dados são exibidos como marcadores no mapa. Os valores dos dados podem ser coordenadas (pares latitude-long) ou endereços reais. O mapa será dimensionado de forma adequada para incluir todos os pontos identificados.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Mapa Básico Mapa básico do Google. |
| 2 | Mapa usando Latitude / Longitude Mapa com localizações especificadas usando Latitude e Longitude. |
| 3 | Personalizando marcadores Marcadores personalizados no mapa. |
O organograma ajuda a renderizar uma hierarquia de nós, usado para retratar relacionamentos superiores / subordinados em uma organização. Por exemplo, uma árvore genealógica é um tipo de organograma. Já vimos a configuração usada para desenhar este gráfico no capítulo Sintaxe de configuração de gráficos do Google . Então, vamos ver o exemplo completo.
Configurações
Nós usamos OrgChart classe para mostrar o organograma baseado.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Exemplo
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Resultado
Verifique o resultado.
Os gráficos de pizza são usados para desenhar gráficos de pizza. Nesta seção, discutiremos os seguintes tipos de gráficos de pizza.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Torta Básica Gráfico de pizza básico. |
| 2 | Donut Chart Gráfico Donut. |
| 3 | Gráfico circular 3D Gráfico de pizza 3D. |
| 4 | Gráfico de pizza com fatias explodidas Gráfico de pizza com fatias explodidas. |
Um gráfico sankey é uma ferramenta de visualização e é usado para representar um fluxo de um conjunto de valores para outro. Os objetos conectados são chamados de nós e as conexões são chamadas de links. Sankeys são usados para mostrar um mapeamento muitos para muitos entre dois domínios ou caminhos múltiplos através de um conjunto de estágios.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Gráfico básico de Sankey Gráfico básico de Sankey. |
| 2 | Gráfico Sankey multinível Gráfico de Sankey multinível. |
| 3 | Customizing Sankey Chart Gráfico de Sankey personalizado. |
Sankey Charts, Scatter Charts, Gráficos de área escalonados, Tabela, Timelines, TreeMap, Trendlines são usados para desenhar gráficos de dispersão. Nesta seção, discutiremos os seguintes tipos de gráficos de dispersão.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Dispersão Básica Gráfico de dispersão básico. |
| 2 | Gráfico de dispersão de materiais Gráfico de dispersão de materiais. |
| 3 | Gráfico de dispersão do eixo Y duplo Gráfico de dispersão de material com eixo Y duplo. |
| 4 | Gráfico de dispersão do eixo X principal Gráfico de dispersão de material com o eixo X no topo. |
Um gráfico de área em etapas é um gráfico de área com base em etapas. Vamos discutir os seguintes tipos de gráficos de área escalonados.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Gráfico escalonado básico Gráfico de área escalonado básico. |
| 2 | Gráfico escalonado empilhado Gráfico de área escalonada empilhada. |
| 3 | Gráfico 100% Empilhado Escalonado Gráfico de área em etapas 100% empilhadas. |
O gráfico de tabela ajuda a renderizar uma tabela que pode ser classificada e paginada. As células da tabela podem ser formatadas usando strings de formato ou inserindo HTML diretamente como valores de células. Os valores numéricos são alinhados à direita por padrão; Os valores booleanos são exibidos como marcas de verificação ou cruzadas. Os usuários podem selecionar linhas únicas com o teclado ou o mouse. Os cabeçalhos das colunas podem ser usados para classificação. A linha do cabeçalho permanece fixa durante a rolagem. A tabela dispara eventos correspondentes à interação do usuário. Já vimos a configuração usada para desenhar este gráfico no capítulo Google Charts Configuration Syntax . Então, vamos ver o exemplo completo.
Configurações
Nós usamos Table classe para mostrar o gráfico baseado em tabela.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Exemplo
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Resultado
Verifique o resultado.
Cronogramas descrevem como um conjunto de recursos é usado ao longo do tempo. Vamos discutir os seguintes tipos de gráficos de cronogramas.
| Sr. Não. | Tipo / descrição do gráfico |
|---|---|
| 1 | Gráfico de cronogramas básicos Gráfico de cronogramas básicos |
| 2 | Gráfico de cronogramas com rótulos de dados Gráfico de cronogramas com rótulos de dados |
| 3 | Gráfico de cronogramas sem rótulo de linha Gráfico de cronogramas sem rótulo de linha |
| 4 | Coloração do gráfico de cronogramas Gráfico de cronogramas personalizados |
TreeMap é uma representação visual de uma árvore de dados, onde cada nó pode ter zero ou mais filhos e um pai (exceto para a raiz). Cada nó é exibido como um retângulo, pode ser dimensionado e colorido de acordo com os valores que atribuímos. Os tamanhos e cores são avaliados em relação a todos os outros nós do gráfico. A seguir está um exemplo de um gráfico de mapa de árvore. Já vimos a configuração usada para desenhar este gráfico no capítulo Google Charts Configuration Syntax . Então, vamos ver o exemplo completo.
Configurações
Nós usamos TreeMap classe para mostrar o diagrama de mapa de árvore.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Exemplo
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Resultado
Verifique o resultado.
Uma linha de tendência é uma linha sobreposta em um gráfico para revelar a direção geral dos dados. O Google Charts pode gerar automaticamente linhas de tendência para Sankey Charts, Scatter Charts, Gráficos de área escalonada, Tabela, Timelines, TreeMap, Trendlines, Bar Charts, Column Charts e Line Charts. Vamos discutir os seguintes tipos de gráficos de linhas de tendência.
| Sr. Não. | Tipo e descrição do gráfico |
|---|---|
| 1 | Gráfico de linhas de tendência básicas Gráfico de linhas de tendência básicas. |
| 2 | Gráfico de linhas de tendência exponenciais Gráfico de linhas de tendência exponencial. |
| 3 | Gráfico de linhas de tendência polinomiais Gráfico de linhas de tendência polinomiais. |