opciones de configuración Highcharts se describen en detalle
Highcharts opciones de configuración proporcionan una gran cantidad de parámetros, usted puede fácilmente personalizado para satisfacer las necesidades del usuario tablas de esta sección para conocer más opciones de configuración Highcharts de uso:
Los parámetros de configuración (+ atributos de eventos)
chart.events.addSeries: Añadir el número de columnas de la tabla.
chart.events.click: Haga clic en un evento ocurrió la totalidad del área de trazado del gráfico.
chart.events.load: Gráfico de evento de carga.
chart.events.redraw: Tabla de redibujar evento, haga clic en la leyenda espectáculos y puede desencadenar dibujo oculto.
chart.events.selection: Cuando el zoom seleccionable curva de la carta, seleccionar el gráfico cuando la operación puede desencadenar el evento.
chart.height: tabla de estatura dibujado.
chart.inverted: Tabla de x, eje y en la bolsa.
chart.polar: si el gráfico polar.
chart.reflow: cuando cambia el tamaño de la ventana, el ancho de los cambios de tamaño de ventana del gráfico de adaptación.
chart.renderTo: cargar el gráfico, es un objeto DOM de la página.
chart.showAxes: gráfico en blanco, si desea mostrar los ejes.
chart.type: tipo de gráfico, línea por defecto, hay bar / columna / pie ......
chart.width: el ancho del área de trazado del gráfico, el valor predeterminado es adaptativo.
chart.zoomType: datos del tipo de amplificación en el gráfico del informe, puede hacer zoom en el eje X o el zoom del eje Y, se puede acercar ejes XY simultáneamente.
colores: La mayoría de las columnas en el gráfico, el número de columnas entre cada color. Es una matriz, generalmente no se mueven.
créditos .enabled: si se permite la visualización de la información de derechos de autor.
credits.href: enlace con derechos de autor.
credits.text: información de copyright texto de la pantalla.
exportación de .buttons.exportButton.enabled: si se debe permitir que el botón Exportar pantalla.
exporting.buttons.exportButton.menuItems: opción de menú botón Exportar.
evento de botón Exportar se hace clic, no menú interno: exporting.buttons.exportButton.onclick.
exporting.buttons.printButton.enabled: si permite que el botón Imprimir.
exporting.buttons.printButton.onclick: haga clic en el botón de impresión evento.
exporting.enabled: se permite imprimir y exportar los botones.
exporting.filename: es el nombre de archivo del archivo de exportación.
exporting.type: exportación de imagen formatos de archivo por defecto.
exporting.url: SVG tabla de conversión y la dirección de la interfaz de procesamiento de exportaciones.
exporing.width: anchura de la imagen de exportación predeterminado.
etiquetas: etiquetas se pueden cargar en cualquier posición de la tabla, hay artículos, estilo.
lang: configuración de los parámetros del lenguaje, y la configuración relacionada con el menú del botón de exportación, nombre y otro tiempo de configuración.
legend.enabled: si se permite a la leyenda.
navigation.buttonOptions.enabled: botones de navegación gráfica si todo lo que se puede hacer clic.
plotOptions .area.allowPointSelect: si se permite a los puntos de datos de clic.
plotOptions.area.color: Dibujo de color.
plotOptions.area.dataLabels.enabled: si se permite a las etiquetas de datos.
plotOptions.area.enableMouseTracking: si se permite a los datos del gráfico, se muestra el punto de datos de seguimiento del ratón burbuja.
plotOptions.area.events.checkboxClick: los datos en caso casilla clic leyenda del gráfico.
plotOptions.area.events.click: gráficos de datos, haga clic en los puntos de datos de eventos.
plotOptions.area.events.hide: tabla de datos, una secuencia de datos de eventos cuando se oculta.
plotOptions.area.events.show: tabla de datos, una secuencia de datos de eventos cuando se muestre.
plotOptions.area.events.legendItemClick: tabla de datos, se hace clic en la leyenda de la partida caso, la asignación directa falsa, no se puede hacer clic.
plotOptions.area.events.mouseOut: puntos de datos del ratón fuera del evento.
plotOptions.area.events.mouseOver: puntos de datos del ratón después del evento.
plotOptions.area.marker.enabled: si se muestra la etiqueta de punto de dibujo gráfico.
plotOptions.area.marker.states.hover.enabled: si se permite a la etiqueta del estado de vuelco.
plotOptions.area.marker.states.select.enabled: si se permite el estado de selección de variables.
plotOptions.area.point.events.click: trazar cada evento único punto de clic.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: Evento borrado se utilizan puntos de tabla.
plotOptions.area.point.events.select: Seleccione el evento gráfico de punto medio.
plotOptions.area.point.events.unselect: Evento gráfico de punto medio cuando está seleccionada.
plotOptions.area.point.events.update: evento de actualización se produce cuando los datos en la tabla.
plotOptions.area.visible: Al cargar la serie de datos por defecto se muestra u oculta.
plotOptions.area.zIndex: En el caso de múltiples secuencias, ajustar el orden de apilamiento de cada secuencia.
Por encima de point.events mismo se aplica también a la otra área de diagramas de clases (arearange, areaspline, areasplinerange), otro histograma (barra, columna) y todos los gráficos.
plotOptions.area.showInLegend: si desea mostrar en la leyenda.
plotOptions.area.stacking: es el valor de la pila, la pila o como un porcentaje.
plotOptions.area.states.hover.enabled: si se permite el estado para poner el ratón.
plotOptions.area.stickyTracking: puntos de datos de seguimiento del ratón pegajosa.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange similar a la plotOptions.area
plotOptions.bar.groupPadding: los gráficos de barras intervalo de paquetes entre cada paquete.
plotOptions.bar.grouping: si desea agrupar los datos.
plotOptions.bar.minPointLength :: Define el valor del punto es cero, el punto de la longitud mínima de
plotOptions.bar.showInLegend: si desea mostrar en la leyenda.
plotOptions.bar.stacking: es el valor de la pila, la pila o como un porcentaje (porcentaje normal de /).
plotOptions.column, plotOptions.columnrange similar a la plotOptions.bar
configuración relacionada plotOptions.line es de configuración plotOptions.area similar.
plotOptions.pie.ignoreHiddenPoint: En el gráfico circular, una secuencia particular leyenda clic para ocultar, todo el gráfico de sectores es 100% reasignación, o escondido sólo sobre la base de la original, que muestra una brecha.
plotOptions.pie.innerSize: Al dibujar un gráfico circular, el centro del gráfico de sectores para reservar mucho espacio en blanco.
plotOptions.pie.slicedOffset: allowPointSelect utilizar en conjunción con, cuando se hace clic en el punto, la cáscara del sector correspondiente, este parámetro de configuración que está espaciado a una distancia.
Otros parámetros de configuración común plotOptions.pie parecido con plotOptions.area, plotOptions.scatter, plotOptions.series, configuración relacionados con la configuración plotOptions.spline plotOptions.area similar.
serie: una matriz.
series.data.color: un dato de color.
series.data.dataLabels: datos de la etiqueta de datos una secuencia.
series.data.events similar a la configuración de plotOptions.area.point.events.
series.data.marker similar a la configuración de plotOptions.area.marker.
series.data.name: Nombre de los puntos de datos de configuración.
series.data.sliced: Configurar el gráfico de sectores, la distancia que separa el tamaño del sector.
series.data.x: valor x del punto.
series.data.y: valor y del punto.
series.name: nombre de la secuencia de datos.
series.stack: apilada índice de grupo.
series.type: secuencia de datos de tipo de visualización.
series.xAxis, series.yAxis: cuando se utilizan varios ejes, especifica el eje corresponde a un número de columnas.
subtítulo: Configuración del subtítulo de la tabla.
Título: el título de la configuración gráfica.
información sobre herramientas: Configurar datos rápidas burbuja en el gráfico.
tooltip.valueDecimals: Permitir cifras decimales.
tooltip.percentageDecimals: Permitir porcentaje de cifras decimales.
ajustes de configuración de ejes ejeX, yAxis
allowDecimals: si se permite a los ejes decimales.
categorías: una serie de ejes de clasificación.
tramas: trazar la línea principal.
tickColor: escala de colores.
tickInterval: Escala del valor de paso.
labels.rotation: etiquetas de la escala grado de rotación
Gráfico: opción de área de gráfico
opción de gráfico de área de gráfico de área tabla se usa para establecer las propiedades.
| parámetros | descripción | defecto |
|---|---|---|
| backgroundColor | Configuración de área de gráfico color de fondo | #FFFFFF |
| borderWidth | Ajuste el ancho del borde carta | 0 |
| borderRadius | Ajuste de la frontera, ángulos redondeados | 5 |
| renderTo | Gráfico de la colocación de contenedores, colocadas generalmente en un DIV HTML, obtener el valor del atributo ID DIV | nulo |
| defaultSeriesType | El tipo de gráfico predeterminado línea, spline, área, areaspline, columnas, barras, circular, dispersión | 0 |
| ancho | ancho del gráfico, de acuerdo con el contenedor gráfico de ancho por defecto de adaptación | nulo |
| altura | Tabla de medida, el contenedor gráfico predeterminado de acuerdo con gran capacidad de adaptación | nulo |
| margen | Y otros elementos en el conjunto de pasos gráfico, tales como [0,0,0,0] | [Null] |
| plotBackgroundColor | color de fondo área principal carta de colores de fondo, los ejes X e Y del área cerrada | nulo |
| plotBorderColor | El color de la región fronteriza limita con el gráfico principal, los ejes X e Y del área cerrada | nulo |
| plotBorderWidth | Ancho del borde principal área de gráfico | 0 |
| sombra | Sombra se establece, es necesario configurar el color de fondo backgroundColor. | falso |
| reflujo | Ya sea mediante el área de la gráfica de la altura y la anchura, si no se establece la anchura y la altura, el tamaño será de adaptación. | verdadero |
| zoomType | Arrastre el ratón para hacer zoom, zoom a lo largo del eje X o Y, se puede configurar para: 'x', 'y', 'xy' | '' |
| eventos | Evento de devolución de llamada método addSeries de apoyo, haga clic en el método, el método de carga, el método de selección de la función de devolución de llamada. |
Color: Opciones de color
Las opciones de color para establecer el esquema de color carta de color.
| parámetros | descripción | defecto |
| color | Para la exhibición de color, una serie de gráficos, la línea / barra / gráfico circular así sucesivamente. | formación |
Highcharts ya ofrece varios colores por defecto, cuando se desea mostrar gráficos en color, más amable, más gráficos se iniciará automáticamente desde la primera selección del esquema de color. Custom enfoque de combinación de colores:
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});Título: Título Opciones
La opción de subtítulos título se usa para establecer las propiedades pertinentes del título del gráfico.
| parámetros | descripción | defecto |
|---|---|---|
| texto | El texto del título. | título del gráfico |
| alinear | La alineación horizontal. | centro |
| verticalAlign | La alineación vertical. | top |
| margen | Entre el título principal y subtítulo rango de tono o gráfico. | 15 |
| flotante | Ya sea flotante, de ser cierto, el título puede ser desplazada con respecto a la zona principal del gráfico, con x, y atributo. | falso |
| estilo | Establecer los estilos CSS. | {Color: '# 3E576F', fontSize: '16px'} |
opciones de subtítulos: Subtítulo
Opciones de propiedad subtitular proporcionar sustancialmente el mismo título con el título, el título puede referirse a las opciones anteriores, vale la pena mencionar que la opción de subtítulos de texto por defecto '', que está vacía, por lo que los subtítulos no se muestra de forma predeterminada.
ejeX: opción de eje X
opción eje X se utiliza para establecer la tabla de eje X propiedades relacionadas.
| parámetros | descripción | defecto |
|---|---|---|
| categorías | Establecer los nombres de categoría eje X, matrices, por ejemplo: Categorías: [ 'Manzanas', 'Bananas', 'naranjas'] | [] |
| título | Nombre del eje X, texto de apoyo, activar, alinear, rotación, estilo y otros atributos | |
| etiquetas | Ajuste el eje X de cada estilo de estilo nombre de la categoría, el formato de formateador, el ángulo de rotación y similares. | formación |
| max | El eje X valor máximo (categorías está vacía), si es nulo, el valor máximo se ajustará automáticamente a los datos del eje X a un máximo. | nulo |
| min | Eje X mínima (categorías está vacía), si es nulo, entonces el valor mínimo se ajustará automáticamente a los datos del eje X a un mínimo. | formación |
| gridLineColor | Rejilla (vertical) Color | # C0C0C0 |
| gridLineWidth | Rejilla (barra vertical) de ancho | 1 |
| lineColor | color de la línea de base | # C0D0E0 |
| anchoLinea | ancho de la línea de base | 0 |
opción eje Y: yAxis
opción del eje Y es consistente con las opciones Xaxis antes mencionados, por favor refiérase a la tabla en el parámetro de configuración ya no se muestran por separado.
Series: Datos opciones de columna
opción Columnas de datos se utiliza para establecer el gráfico para mostrar los datos de las propiedades relacionadas.
| parámetros | descripción | defecto |
|---|---|---|
| datos | Se muestra en la columna de los datos del gráfico, que puede ser una matriz o datos con formato JSON. Tales como: datos: [0, 5, 3, 5], o datos: [{nombre: "El punto 1 ', y: 0}, {nombre:" El punto 2', y: 5}] | '' |
| nombre | Muestra el nombre de la columna de datos. | '' |
| tipo | tipos de datos de columna, área de soporte, areaspline, barras, columnas, líneas, circular, dispersión o spline | línea |
plotOptions: opciones de puntos de datos
plotOptions utilizan para establecer los puntos de datos gráfica propiedades relacionadas. plotOptions Según diversos tipos de gráficos, sus propiedades conjunto ligeramente diferente, ahora las opciones más comunes en la lista.
| parámetros | descripción | defecto |
| habilitado | Los datos se muestran directamente en los puntos de datos | falso |
| allowPointSelect | Si se debe permitir el uso del ratón para seleccionar los puntos de datos | falso |
| formateador | la función de devolución de llamada, el formato de visualización de datos | formateador: function () {return this.y;} |
Información sobre la herramienta: puntos de datos con balón
información sobre herramientas para establecer el cuadro de aviso cuando se muestre el punto de datos de deslizamiento del ratón.
| parámetros | descripción | defecto |
| habilitado | Si se desea mostrar el cuadro de mensajes | verdadero |
| backgroundColor | Ajuste el color de fondo del globo | RGBA (255, 255, 255, .85) |
| borderColor | Globo de color del borde, la columna de datos predeterminado que coincida con el color de forma automática | auto |
| borderRadius | Globo ángulo ronda | 5 |
| sombra | Si se desea mostrar las sombras cuadro de mensaje | verdadero |
| estilo | Configuración de estilos de contenido globo, tales como color de fuente, etc. | Color: '# 333' |
| formateador | función de devolución de dar formato a la salida de la pantalla del globo. contenido de soporte para la espalda, como las etiquetas HTML: <b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
Leyenda: Opción Leyenda
Subtítulo Subtítulo se utiliza para establecer las propiedades.
| parámetros | descripción | defecto |
|---|---|---|
| disposición | formato de visualización, nivel vertical y horizontal vertical de apoyo | horizontal |
| alinear | Alineación. | centro |
| backgroundColor | Leyenda color de fondo. | nulo |
| borderColor | Leyenda color del borde. | # 909090 |
| borderRadius | Leyenda ángulo de frontera | 5 |
| habilitado | Si se desea mostrar la leyenda | verdadero |
| flotante | Puedo flotar, con propiedades x. | falso |
| sombra | Si se desea mostrar sombras | falso |
| estilo | El contenido de la leyenda estilo | '' |
Para obtener información más detallada, consulte la página web oficial de los Highcharts documentación en inglés: http://api.highcharts.com/highcharts