Highcharts opções de configuração são descritas em detalhe
Highcharts opções de configuração fornecer uma série de parâmetros, você pode facilmente personalizado para atender às necessidades dos utilizadores gráficos nesta seção para descobrir mais opções de configuração Highcharts de utilização:
parâmetros de configuração (atributos + Event)
chart.events.addSeries: Adicione o número de colunas para o gráfico.
chart.events.click: Clique em um evento toda a área gráfica gráfico ocorreu.
chart.events.load: Gráfico evento de carregamento.
chart.events.redraw: gráfico redesenhar evento, clique em A legenda mostra e pode desencadear desenho escondido.
chart.events.selection: Quando o zoom selecionável gráfico de curva, selecione o gráfico quando a operação pode disparar o evento.
chart.height: gráfico de altura desenhado.
chart.inverted: gráfico x, eixo y sobre o câmbio.
chart.polar: se o gráfico polar.
chart.reflow: quando as alterações de tamanho da janela, a largura das alterações de tamanho de janela de gráfico adaptativos.
chart.renderTo: carregar o gráfico, é um objeto DOM na página.
chart.showAxes: carta em branco, quer para mostrar eixos.
chart.type: tipo de gráfico, a linha padrão, há bar / coluna / pie ......
chart.width: a largura da área de plotagem do gráfico, o padrão é adaptável.
chart.zoomType: Tipo de amplificação de dados no gráfico do relatório, você pode aumentar o zoom para o eixo X ou zoom do eixo Y, pode aumentar o zoom XY eixos simultaneamente.
cores: A maioria das colunas no gráfico, o número de colunas entre cada cor. É uma matriz, geralmente não se movem.
créditos .enabled: se a permitir a exibição de informações de copyright.
credits.href: ligação com direitos de autor.
credits.text: texto de exibição informações de copyright.
exportar .buttons.exportButton.enabled: se a permitir que o botão de exibição Export.
exporting.buttons.exportButton.menuItems: opção de menu do botão Export.
evento de botão Export é clicado, não menu interno: exporting.buttons.exportButton.onclick.
exporting.buttons.printButton.enabled: se a permitir que o botão Imprimir.
exporting.buttons.printButton.onclick: botão de impressão clique evento.
exporting.enabled: imprimir e exportar botões são permitidos.
exporting.filename: é o nome do arquivo de exportação de arquivos.
exporting.type: formatos padrão de arquivo de imagem de exportação.
exporting.url: tabela de conversão de SVG e endereço interface de processamento de exportação.
exporing.width: largura da imagem padrão de exportação.
Marcadores: rótulos podem ser carregados em qualquer posição do gráfico, há itens, estilo.
lang: configuração do parâmetro de idioma e configuração relacionadas com o menu do botão Export, nome e outras tempo de configuração.
legend.enabled: se a permitir Legend.
navigation.buttonOptions.enabled: botões de navegação gráfico se tudo o que pode ser clicado.
plotOptions .area.allowPointSelect: se a permitir que os pontos de dados de cliques.
plotOptions.area.color: Desenho da cor.
plotOptions.area.dataLabels.enabled: se a permitir que os rótulos de dados.
plotOptions.area.enableMouseTracking: se a permitir que os dados no gráfico, ponto de rastreamento do mouse bolha de dados é exibida.
plotOptions.area.events.checkboxClick: os dados no gráfico lenda caixa clique evento.
plotOptions.area.events.click: gráficos de dados, pontos de dados clique evento.
plotOptions.area.events.hide: gráfico de dados, uma sequência de dados de eventos quando escondida.
plotOptions.area.events.show: gráfico de dados, uma sequência de dados de eventos quando exibido.
plotOptions.area.events.legendItemClick: gráfico de dados, a lenda do item de evento é clicado, a atribuição directa falsa, não é clicável.
plotOptions.area.events.mouseOut: pontos de dados do rato em cada caso.
plotOptions.area.events.mouseOver: pontos de dados do mouse após o evento.
plotOptions.area.marker.enabled: se deseja exibir a tag ponto de desenho gráfico.
plotOptions.area.marker.states.hover.enabled: se a permitir estado tag capotamento.
plotOptions.area.marker.states.select.enabled: se a permitir status de seleção tag.
plotOptions.area.point.events.click: traçar cada evento único ponto clique.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Event excluído pontos do gráfico são usados.
plotOptions.area.point.events.select: Selecione o evento gráfico de ponto médio.
plotOptions.area.point.events.unselect: Event gráfico ponto médio quando desmarcada.
plotOptions.area.point.events.update: update evento ocorre quando os dados no gráfico.
plotOptions.area.visible: Ao carregar a série de dados padrão é exibido ou oculto.
plotOptions.area.zIndex: No caso de múltiplas sequências, ajustar a ordem de empilhamento de cada sequência.
Acima point.events mesmo também se aplica à outra área de diagramas de classe (arearange, areaspline, areasplinerange), outro histograma (bar, coluna) e todos os gráficos.
plotOptions.area.showInLegend: se deseja mostrar na legenda.
plotOptions.area.stacking: é o valor da pilha, a pilha ou como uma percentagem.
plotOptions.area.states.hover.enabled: se a permitir que o Estado para colocar o mouse.
plotOptions.area.stickyTracking: pontos de dados de rastreamento do mouse pegajosa.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange semelhante ao plotOptions.area
plotOptions.bar.groupPadding: Para gráficos de barras intervalo do pacote entre cada pacote.
plotOptions.bar.grouping: se agrupar os dados.
plotOptions.bar.minPointLength :: Define o valor de ponto é zero, o ponto de o comprimento mínimo para
plotOptions.bar.showInLegend: se deseja mostrar na legenda.
plotOptions.bar.stacking: é o valor da pilha, a pilha ou como uma percentagem (percentagem normal de /).
plotOptions.column, plotOptions.columnrange semelhante ao plotOptions.bar
plotOptions.line configuração relacionada é plotOptions.area configuração semelhante.
plotOptions.pie.ignoreHiddenPoint: No gráfico de pizza, uma sequência particular pela legenda clique para esconder, toda a carta de torta é 100% re-atribuição, ou escondidos apenas com base do original, que mostra uma lacuna.
plotOptions.pie.innerSize: Ao desenhar um gráfico de pizza, centro de gráfico de pizza para reservar muito branco.
plotOptions.pie.slicedOffset: allowPointSelect usar em conjunto com, quando o ponto é clicado, a casca do setor correspondente, este parâmetro de configuração que está espaçada a uma distância.
Outra configuração comum parâmetros plotOptions.pie semelhança com plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline configuração relacionada configuração plotOptions.area similar.
série: um array.
series.data.color: um de dados de cor.
series.data.dataLabels: dados da etiqueta de dados uma seqüência.
series.data.events semelhante à configuração de plotOptions.area.point.events.
series.data.marker semelhante à configuração de plotOptions.area.marker.
series.data.name: nome dos pontos de dados de configuração.
series.data.sliced: Configurar o gráfico de pizza, a distância que separa o tamanho do setor.
series.data.x: valor x do ponto.
series.data.y: valor y do ponto.
series.name: nome da sequência de dados.
series.stack: empilhados índice do grupo.
series.type: tipo de exibição sequência de dados.
series.xAxis, series.yAxis: ao usar vários eixos, especifica qual eixo corresponde a um número de colunas.
Legenda: Configurando o subtítulo do gráfico.
Título: o título da configuração do gráfico.
dica: Configurar dados rápidas bolha no gráfico.
tooltip.valueDecimals: Permitir casas decimais.
tooltip.percentageDecimals: Permitir percentual de casas decimais.
definições de configuração de eixo xaxis, yaxis
allowDecimals: se a permitir que as casas decimais dos eixos.
categorias: um conjunto de eixos de classificação.
enredos: Desenhar a linha principal.
tickColor: escala de cores.
tickInterval: escala de valores etapa.
labels.rotation: Escala etiquetas grau de rotação
Gráfico: opção de área do gráfico
opção de gráfico de área gráfico de área gráfico é usado para definir as propriedades.
| parâmetros | descrição | omissão |
|---|---|---|
| backgroundColor | cor de fundo área do gráfico Definir | #FFFFFF |
| borderWidth | Definir a largura da borda gráfico | 0 |
| borderRadius | Definir a borda, ângulos arredondados | 5 |
| renderTo | Gráfico colocando contentores, geralmente colocadas em um html DIV, obter o valor do atributo id DIV | nulo |
| defaultSeriesType | O tipo de gráfico padrão de linha, spline área, areaspline, coluna, barra, torta, dispersão | 0 |
| largura | width gráfico, de acordo com o recipiente gráfico de largura padrão adaptativo | nulo |
| altura | gráfico de altura, o recipiente de gráfico padrão de acordo com altamente adaptável | nulo |
| margem | E outros elementos na matriz gráfico de campo, tais como [0,0,0,0] | [Nulo] |
| plotBackgroundColor | cor de fundo gráfico de área principal fundo, os eixos X e Y do espaço fechado | nulo |
| plotBorderColor | A cor da região de fronteira faz fronteira com o gráfico principal, os eixos X e Y da área fechada | nulo |
| plotBorderWidth | Largura da borda área do gráfico principal | 0 |
| sombra | Sombra é definido, você precisa definir o backgroundColor cor de fundo. | falso |
| reflow | Seja usando a área do gráfico a partir da altura e largura, se não definir a largura e altura, o tamanho será adaptável. | verdadeiro |
| zoomType | Arraste o mouse para fazer zoom, zoom ao longo do eixo x ou y, pode ser definido como: 'x', 'xy' 'y' | '' |
| eventos | Evento de retorno de chamada método addSeries de suporte, clique no método, método de carga, o método de selecção da função de retorno. |
Cor: Opções de cor
opções de cor para definir o esquema de cores cartela de cores.
| parâmetros | descrição | omissão |
| cor | Para ecrã a cores, uma variedade de gráficos, a linha / bar / gráfico de pizza assim por diante. | ordem |
Highcharts já fornece vários esquema de cores padrão, quando você deseja exibir gráficos em cores mais de espécie, mais gráficos vai começar automaticamente a partir da primeira seleção esquema de cores. abordagem personalizada esquema de cores:
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});Título: opções de título
A opção de legendas título é usado para definir as propriedades relevantes do título do gráfico.
| parâmetros | descrição | omissão |
|---|---|---|
| texto | O texto do título. | título do gráfico |
| alinhar | alinhamento horizontal. | centro |
| verticalAlign | alinhamento vertical. | topo |
| margem | Entre o título principal e faixa de afinação de legenda ou gráfico. | 15 |
| flutuante | Se flutuante, se for verdade, o título pode ser compensado a partir da área do gráfico principal, com x, y atributo. | falso |
| estilo | Definir estilos CSS. | {Color: '# 3E576F', fontSize: '16px'} |
opções de legendas: Legenda
Opções de propriedade legendar fornecer substancialmente o mesmo título com o título, o título pode consultar as opções acima, vale a pena mencionar que a opção de legendas de texto padrão é '', que está vazia, então a legenda não é exibida por padrão.
xaxis: opção eixo X
opção eixo X é usado para definir o eixo X gráfico propriedades relacionadas.
| parâmetros | descrição | omissão |
|---|---|---|
| Categorias | Defina os nomes das categorias eixo X, matrizes, por exemplo: categorias: [ «Maçãs», 'Bananas', 'laranjas'] | [] |
| título | Nome do eixo X, texto de apoio, permitiu, alinhe, rotação, estilo e outros atributos | |
| etiquetas | Definir o eixo X de cada estilo estilo nome da categoria, o formato formatador, o ângulo de rotação e similares. | ordem |
| max | Eixo X valor máximo (categorias está vazia), se for nulo, o valor máximo irá corresponder automaticamente os dados do eixo-X para um máximo. | nulo |
| min | mínimo do eixo X (categorias está vazia), se for nulo, o valor mínimo irá corresponder automaticamente os dados do eixo-X para um mínimo. | ordem |
| gridLineColor | Grid (vertical) a cores | # C0C0C0 |
| gridLineWidth | Grid (barra vertical) Largura | 1 |
| LineColor | cor da linha de base | # C0D0E0 |
| lineWidth | largura da linha de base | 0 |
opção eixo Y: yaxis
opção do eixo Y é consistente com as opções xaxis acima mencionados, por favor, consulte a tabela no parâmetro definições já não são listados separadamente.
Séries: Dados opções de coluna
opção Colunas de dados é usado para definir o gráfico para mostrar dados de propriedades relacionadas.
| parâmetros | descrição | omissão |
|---|---|---|
| dados | Exibido na coluna de dados do gráfico, que pode ser uma matriz ou dados JSON formatados. Tais como: Dados: [0, 5, 3, 5], ou Dados: [{name: 'Ponto 1', y: 0}, {name: 'Ponto 2', y: 5}] | '' |
| nome | Exibe o nome da coluna de dados. | '' |
| tipo | tipos de dados de coluna, área de apoio, areaspline, barra, coluna, linha, torta, dispersão ou spline | linha |
plotOptions: opções de pontos de dados
plotOptions usado para definir os pontos de dados do gráfico propriedades relacionadas. plotOptions De acordo com vários tipos de gráficos, as suas propriedades conjunto ligeiramente diferente, agora opções comumente usadas listados.
| parâmetros | descrição | omissão |
| ativado | Os dados são exibidos directamente sobre os pontos de dados | falso |
| allowPointSelect | Quer para permitir a utilização do rato para seleccionar os pontos de dados | falso |
| formatador | função de retorno, o formato de exibição de dados | formatador: function () {return this.y;} |
Dica: pontos de dados de balão
informações dica para definir a caixa de alerta quando o ponto de rato dados slide é exibido.
| parâmetros | descrição | omissão |
| ativado | Se para exibir a caixa de alerta | verdadeiro |
| backgroundColor | Definir o balão cor de fundo | rgba (255, 255, 255, .85) |
| borderColor | Balão cor da borda, coluna de dados padrão corresponder automaticamente a cor | automático |
| borderRadius | Balão ângulo rodada | 5 |
| sombra | Se deseja exibir as sombras caixa de alerta | verdadeiro |
| estilo | Definição de estilos de conteúdo de balão, tais como cor da fonte, etc. | color: '# 333' |
| formatador | função de retorno para formatar a saída de exibição de balão. Voltar conteúdo de suporte, tais como tags HTML: <b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Legenda: Opção Legend
Legend Legend é usado para definir as propriedades.
| parâmetros | descrição | omissão |
|---|---|---|
| traçado | formato de exibição, nível vertical e horizontal vertical de apoio | horizontal |
| alinhar | Alinhamento. | centro |
| backgroundColor | cor de fundo Legend. | nulo |
| borderColor | cor da borda Legend. | # 909090 |
| borderRadius | ângulo fronteira Legend | 5 |
| ativado | Se deseja exibir a legenda | verdadeiro |
| flutuante | I pode flutuar, com x, y propriedades. | falso |
| sombra | Se deseja exibir sombras | falso |
| estilo | O conteúdo do estilo individualidades | '' |
Para informações mais detalhadas, consulte o site oficial dos Highcharts documentação em inglês: http://api.highcharts.com/highcharts