Controle de Gráficos

Use o controle de Gráfico para criar gráficos de pizza, gráficos de barras, gráficos de colunas e gráficos de linhas que exibem conjuntos de dados.

Um ponto de dados é um único par nome-valor que representa uma unidade de dados de negócios ou um ponto em um gráfico. Por exemplo, no par <"2010", 5657>, "2010" é o nome do ponto de dados e 5657 é o valor. Em um gráfico, um único ponto de dados é representado como uma fatia para plotagens de setores circulares, uma barra para plotagens de barras ou um único ponto para plotagens de linha e de áreas. ChartDataPoint é o objeto de dados de negócios equivalente utilizado pelo controle Gráfico. Um objeto ChartDataPoint possui um nome de sequência e parâmetro de valor decimal utilizado para conter uma única unidade de dados de negócios.

Uma série de dados é uma lista de vários pontos de dados. Na plotagem de barra, cada ponto de dados na série é uma barra e possui a mesma cor. Na plotagem de linha, cada ponto de dados na série é um ponto e os pontos são conectados por uma linha. Cada série de dados possui um rótulo para que ele possa ser incluído na legenda. ChartDataSeries é o objeto de dados de negócios equivalente utilizado pelo controle Gráfico. O objeto ChartDataSeries representa uma série de dados, possui um rótulo de sequência (que é exibido na legenda quando aplicável) e contém uma lista de dados.

Uma plotagem é composta de várias séries de dados que devem ser exibidas da mesma maneira. Se uma única plotagem de barra tinha quatro séries de dados, as quatro série de dados seriam exibidas como quatro grupos de barras. Plotagens de setores circulares podem exibir apenas uma série de dados de cada vez. ChartDataPlot é o objeto de dados de negócios equivalente utilizado pelo controle Gráfico. O objeto ChartDataPlot possui apenas um parâmetro - series (uma lista de ChartDataSeries) - que representa uma plotagem.

Um gráfico é composto de uma ou mais plotagens. A maioria dos gráficos possuem uma única de plotagem. Por exemplo, um gráfico de pizza é um gráfico com apenas uma plotagem - uma plotagem de setores circulares. Entretanto, um gráfico pode ter várias plotagens, como uma plotagem de linhas exibida no topo de uma plotagem de barra vertical. ChartData é o objeto de dados de negócios equivalente utilizado pelo controle Gráfico. O objeto ChartData obtém limites para o controle Gráfico e possui um parâmetro - plot (uma lista de ChartDataPlots).

Dica: Dados de gráfico empilhado são úteis quando há várias séries de dados exibidas em um gráfico porque facilitam ver os totais agregados. Por exemplo, empilhamento de dados pode tornar os clusters de barras em colunas únicas ou colocar áreas em um gráfico de área um sobre o outro. Você pode ativar o empilhamento a partir das opções de configuração do controle Gráfico.
Tabela 1. Ligação de objeto de negócios de Gráfico
Ligação Descrição
data (ChartData) Contém diversos objetos ChartDataPlot que são exibidos no gráfico (substituição)
Tabela 2. Propriedades de configuração de Gráfico
Rótulo de configuração da instância Descrição Opção de configuração de definição Valor padrão
Título O título é exibido acima do gráfico. title (String) (vazio)
Largura A largura do gráfico, em pixels. width (Decimal) (vazio)
Altura A altura do gráfico, em pixels. A altura do título do gráfico não está contabilizada para esse valor. height (Decimal) (vazio)
Tema O estilo aplicado ao gráfico. theme (ChartThemeSelection) Padrão
Tema customizado O estilo customizado aplicado ao gráfico quando Tema é configurado para Customizado. customTheme (String) (vazio)
Legenda Onde a legenda é exibida no gráfico legendPosition (ChartLegendPositionSelection) Nenhum(a)
Exibir gráficos de barra em pilha Exibe barras e colunas em pilhas ao invés de lado a lado stackBarAndColumnCharts (Boolean) False (não selecionado)
Exibir gráficos de linha em pilha Exibe gráficos de linha em pilhas ao invés de sobrepô-los stackLineCharts (Boolean) False (não selecionado)
Exibir gráficos de área em pilha Exibe gráficos de áreas em pilhas ao invés de sobrepô-los stackAreaCharts (Boolean) False (não selecionado)
Forçar dados categóricos Em gráficos de linha e gráficos de áreas, exibe valores numéricos como rótulos de categoria que são distribuídos uniformemente entre o eixo X ou o eixo Y.

Por exemplo, se os dados numéricos [1979, 5;1980, 15] representam o número de widgets vendidos em um ano específico, para propósitos de exibição, você pode ativar essa opção para que cada ano seja igualmente espaçado pelo eixo.

forceCategoricalData (Boolean) False (não selecionado)
Opções de exibição Os tipos de gráficos que são exibidos e as configurações. displayOptions (ChartDisplayOptions) (lista vazia)
Serviço de localização O serviço usado para recuperar as sequências localizadas para uso com essa Visualização Coach. localizationService (Mensagens Localizadas de painéis) Carregador de Mensagens Localizadas de Painéis
Ao clicar O segmento no qual o usuário clicou no gráfico. lastClickedSegment (ChartClickEvent) (lista vazia)
Atualização de gráfico Atualiza o gráfico. Geralmente, você atualizaria a variável à qual este gráfico está ligado antes de atualizar o gráfico para exibir os dados atualizados. Após a atualização do gráfico, essa opção reconfigura para seleção cancelada. triggerChartReset (Boolean) False (não selecionado)

Esta visualização de coach não usa a propriedade de visibilidade.

Dica: Para cada ChartDataPlot incluído no objeto ChartDataPlot, deve haver uma linha correspondente incluída na opção de configuração Exibir opções para que os ChartDataPlots fornecidos sejam exibidos corretamente.

Quando diversos plots estão sendo renderizados em um único gráfico, você deve ativar as opções Exibir Eixo Horizontal e Exibir Eixo Vertical para cada plot. Para evitar sobreposição, ative as opções Inversão Horizontal e Inversão Vertical.

O código de amostra a seguir representa um objeto JSON para construir um objeto ChartData:
  tw.local.myChartData = { //the ChartData object
       plots: [
           { //a ChartDataPlot object
               series: [
                   { //a ChartDataSeries object
                       label: "Size (oz)",
                       data: [
                           { name: "Small", value: 6 }, //a ChartDataPoint object
                           { name: "Medium", value: 8 }, //another ChartDataPoint object
                           { name: "Large", value: 12 } //another ChartDataPoint object
                   ]
                   },
                   { //another ChartDataSeries object
                       label: "Sugar (g)",
                       data: [
                           { name: "Small", value: 12 }, //a ChartDataPoint object
                           { name: "Medium", value: 16 }, //another ChartDataPoint object
                           { name: "Large", value: 24 } //another ChartDataPoint object
                       ]
                   }
               ]
           },
           { //another ChartDataPlot object
               series: [
                   { //a ChartDataSeries object
                       label: "Satisfaction",
                       data: [
                           { name: "Small", value: 65 }, //a ChartDataPoint object
                           { name: "Medium", value: 80 }, //another ChartDataPoint object
                           { name: "Large", value: 82 } //another ChartDataPoint object
                       ]
                   }
               ]
           }
       ]
   };
As duas primeiras séries de dados no código de amostra podem ser exibidas diferentemente da terceira porque elas estão em objetos ChartDataPlot diferentes.