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).
| Ligação | Descrição |
|---|---|
| data (ChartData) | Contém diversos objetos ChartDataPlot que são exibidos no gráfico (substituição) |
| 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.
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.
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.