Descripción detallada de las opciones de configuración de Highcharts

Highcharts ofrece una gran cantidad de parámetros de opciones de configuración. Puede personalizar fácilmente gráficos que cumplan con los requisitos del usuario. Este capítulo presenta en detalle las instrucciones de uso de las opciones de configuración de Highcharts:

Configuración de parámetros (propiedades + eventos)

  1. chart.events.addSeries: Añadir una serie al gráfico.

  2. chart.events.click: Evento de clic que ocurre en el área de trazado de todo el gráfico.

  3. chart.events.load: Evento de carga del gráfico.

  4. chart.events.redraw: Evento de redibujado del gráfico; se puede activar al hacer clic en la leyenda para mostrar u ocultar el gráfico.

  5. chart.events.selection: Cuando las curvas del gráfico son seleccionables para ampliar, este evento se puede activar al realizar la operación de selección en el gráfico.

  6. chart.height: Valor de altura del gráfico dibujado.

  7. chart.inverted: Intercambia los ejes X e Y en el gráfico.

  8. chart.polar: Indica si es un gráfico polar.

  9. chart.reflow: Cuando cambia el tamaño de la ventana, el ancho del gráfico se adapta automáticamente al cambio de tamaño de la ventana.

  10. chart.renderTo: Ubicación donde se carga el gráfico; es un objeto DOM en la página.

  11. chart.showAxes: Si se muestran los ejes en un gráfico vacío.

  12. chart.type: Tipo de gráfico, el valor predeterminado es 'line', también haybar/column/pie……

  13. chart.width: Ancho del área de trazado del gráfico, por defecto es adaptativo.

  14. chart.zoomType: Tipo de ampliación del gráfico de datos; se puede ampliar por el eje X, por el eje Y, o por ambos ejes XY simultáneamente.

  15. colors: Colores entre las distintas series cuando hay múltiples series en el gráfico. Es una matriz; normalmente no se modifica.

  16. credits.enabled: Si se permite mostrar la información de copyright.

  17. credits.href: Enlace de los derechos de autor.

  18. credits.text: Texto mostrado en la información de copyright.

  19. exporting.buttons.exportButton.enabled: Si se permite mostrar el botón de exportación.

  20. exporting.buttons.exportButton.menuItems: Opciones de menú del botón de exportación.

  21. exporting.buttons.exportButton.onclick: Evento al hacer clic en el botón de exportación, no el menú interno.

  22. exporting.buttons.printButton.enabled: Si se permite el botón de impresión.

  23. exporting.buttons.printButton.onclick: Evento de clic del botón de impresión.

  24. exporting.enabled: Si se permiten los botones de impresión y exportación.

  25. exporting.filename: Nombre del archivo exportado.

  26. exporting.type: Formato de archivo de imagen predeterminado para exportar.

  27. exporting.url: Dirección de procesamiento de la interfaz para convertir y exportar gráficos SVG.

  28. exporing.width: Ancho de la imagen exportada por defecto.

  29. labels: Etiquetas; se pueden cargar en cualquier posición del gráfico; contienen items y style.

  30. lang: Configuración de parámetros de idioma, configuración relacionada con el menú del botón de exportación, configuración de nombres de tiempo, etc.

  31. legend.enabled: Si se permite la leyenda.

  32. navigation.buttonOptions.enabled: Si los botones de toda la navegación del gráfico pueden ser clicados.

  33. plotOptions.area.allowPointSelect: Si se permite la selección de puntos de datos al hacer clic.

  34. plotOptions.area.color: Color del área de trazado.

  35. plotOptions.area.dataLabels.enabled: Si se permiten las etiquetas de datos.

  36. plotOptions.area.enableMouseTracking: Si se permite la visualización del globo de seguimiento del mouse sobre los puntos de datos en el gráfico.

  37. plotOptions.area.events.checkboxClick: Evento de clic en la casilla de verificación en la leyenda del gráfico de datos.

  38. plotOptions.area.events.click: Evento de clic en los puntos de datos del gráfico.

  39. plotOptions.area.events.hide: Evento cuando una serie de datos se oculta en el gráfico.

  40. plotOptions.area.events.show: Evento cuando una serie de datos se muestra en el gráfico.

  41. plotOptions.area.events.legendItemClick: Evento cuando se hace clic en un elemento de la leyenda en el gráfico; si se asigna directamente false, no se puede hacer clic.

  42. plotOptions.area.events.mouseOut: Evento de salida del mouse de un punto de datos.

  43. plotOptions.area.events.mouseOver: Evento de paso del mouse sobre un punto de datos.

  44. plotOptions.area.marker.enabled: Si se muestran los marcadores de puntos en el área de trazado del gráfico.

  45. plotOptions.area.marker.states.hover.enabled: Si se permite el estado de hover del mouse sobre los marcadores.

  46. plotOptions.area.marker.states.select.enabled: Si se permite el estado seleccionado de los marcadores.

  47. plotOptions.area.point.events.click: Evento de clic en cada punto individual del gráfico.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Evento al eliminar un punto del gráfico.

  51. plotOptions.area.point.events.select: Evento de selección de puntos en el gráfico.

  52. plotOptions.area.point.events.unselect: Evento al cancelar la selección de un punto en el gráfico.

  53. plotOptions.area.point.events.update: Evento cuando los datos en el gráfico se actualizan.

  54. plotOptions.area.visible: Si la serie de datos está visible u oculta por defecto al cargar.

  55. plotOptions.area.zIndex: Ajusta el orden de apilamiento de cada serie cuando hay múltiples series.

  56. Los point.events anteriores también se aplican a otros gráficos de área (arearange, areaspline, areasplinerange), otros gráficos de barras (bar, column) y a todos los gráficos.

  57. plotOptions.area.showInLegend: Si se muestra en la leyenda.

  58. plotOptions.area.stacking: Si se apila por valor o por porcentaje.

  59. plotOptions.area.states.hover.enabled: Si se permite el estado al pasar el mouse.

  60. plotOptions.area.stickyTracking: Seguimiento adhesivo del mouse sobre los puntos de datos.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange son similares a plotOptions.area.

  62. plotOptions.bar.groupPadding: Para la agrupación de gráficos de barras, el espacio entre cada grupo.

  63. plotOptions.bar.grouping: Si se agrupan los datos.

  64. plotOptions.bar.minPointLength: Define la longitud mínima del punto cuando el valor del punto es cero.

  65. plotOptions.bar.showInLegend: Si se muestra en la leyenda.

  66. plotOptions.bar.stacking: Si se apila por valor o por porcentaje (normal/percent).

  67. plotOptions.column, plotOptions.columnrange son similares a plotOptions.bar

  68. La configuración relacionada de plotOptions.line es similar a la configuración de plotOptions.area.

  69. plotOptions.pie.ignoreHiddenPoint: en un gráfico circular, después de que una serie se oculta al hacer clic en la leyenda, si todo el gráfico circular se redistribuye al 100% o simplemente se oculta sobre el gráfico original, mostrando un hueco.

  70. plotOptions.pie.innerSize: al dibujar un gráfico circular, cuánto espacio en blanco se reserva en el centro del gráfico circular.

  71. plotOptions.pie.slicedOffset: se usa junto con allowPointSelect; cuando se hace clic en un punto, el sector correspondiente se separa. Este parámetro configura la distancia de separación.

  72. Los demás parámetros de configuración comunes de plotOptions.pie son similares a plotOptions.area, plotOptions.scatter, plotOptions.series. La configuración relacionada de plotOptions.spline es similar a la configuración de plotOptions.area.

  73. series: es un array.

  74. series.data.color: el color de un dato concreto.

  75. series.data.dataLabels: la etiqueta de datos de un dato concreto en la serie.

  76. series.data.events es similar a la configuración relacionada de plotOptions.area.point.events.

  77. series.data.marker es similar a la configuración relacionada de plotOptions.area.marker.

  78. series.data.name: configura el nombre del punto de datos.

  79. series.data.sliced: configura en el gráfico circular la distancia de separación de los sectores.

  80. series.data.x: el valor x del punto.

  81. series.data.y: el valor y del punto.

  82. series.name: el nombre de la serie de datos.

  83. series.stack: índice de agrupación para el apilamiento.

  84. series.type: el tipo de visualización de la serie de datos.

  85. series.xAxis, series.yAxis: cuando se usan múltiples ejes, especifica a qué eje corresponde cada serie.

  86. subtitle: configura el subtítulo del gráfico.

  87. title: configura el título del gráfico.

  88. tooltip: configura la información emergente (tooltip) de los datos en el gráfico.

  89. tooltip.valueDecimals: número de decimales permitidos.

  90. tooltip.percentageDecimals: número de decimales permitidos para porcentajes.

  91. xAxis, la configuración de yAxis establece el eje.

  92. allowDecimals: si se permiten decimales en el eje.

  93. categories: es un array, las categorías del eje.

  94. plotLines: dibujar líneas principales.

  95. tickColor: color de las marcas de graduación.

  96. tickInterval: valor de paso de las marcas de graduación.

  97. labels.rotation: grados de rotación de las etiquetas de los ejes.

Chart: Opciones del área del gráfico

Las opciones del área del gráfico (Chart) se utilizan para establecer las propiedades relacionadas con el área del gráfico.

Parámetro Descripción Valor por defecto
backgroundColor Establecer el color de fondo del área del gráfico. #FFFFFF
borderWidth Establecer el ancho del borde del gráfico. 0
borderRadius Establecer el radio de las esquinas del borde del gráfico. 5
renderTo Contenedor donde se coloca el gráfico; generalmente se coloca un DIV en el HTML y se obtiene el valor del atributo id del DIV. null
defaultSeriesType Tipos de gráfico por defecto: line, spline, area, areaspline, column, bar, pie, scatter. 0
width Ancho del gráfico; por defecto se adapta al ancho del contenedor. null
height Alto del gráfico; por defecto se adapta al alto del contenedor. null
margin Establece el espacio entre el gráfico y otros elementos, array, por ejemplo [0,0,0,0]. [null]
plotBackgroundColor Color de fondo del área principal del gráfico, es decir, el color de fondo de la región delimitada por los ejes X e Y. null
plotBorderColor Color del borde del área principal del gráfico, es decir, el color del borde de la región delimitada por los ejes X e Y. null
plotBorderWidth Ancho del borde del área principal del gráfico. 0
shadow Si se establece sombra; es necesario configurar backgroundColor. false
reflow Si se ajusta automáticamente el alto y el ancho del área del gráfico; si no se establecen width y height, se adaptará al tamaño. true
zoomType Arrastrar el mouse para hacer zoom, a lo largo del eje x o y; puede establecerse como: 'x', 'y', 'xy'. ''
events Callbacks de eventos; admite funciones de retorno para los métodos addSeries, click, load, selection, etc.  

Color: Opciones de color

Las opciones de color (Color) se utilizan para establecer el esquema de colores del gráfico.

Parámetro Descripción Valor por defecto
color Se utiliza para mostrar el gráfico; los colores de los gráficos de línea/columna/tarta, etc., en forma de array. array

Highcharts ya proporciona varios esquemas de color por defecto; cuando hay más figuras para mostrar que tipos de color, las figuras adicionales automáticamente empiezan a seleccionar desde el primer esquema de color. Método para personalizar el esquema de color:

Highcharts.setOptions({
    colors: ['#058DC7', '#3273B4', '#ED561B', '#DDDF00', '#24CBE5', '#64A4E5', '#FF9655',
'#FFF263', '#6AB2F9']
});

Title: Opciones de título

Las opciones de título (Title) se utilizan para establecer las propiedades relacionadas con el título del gráfico.

Parámetro Descripción Valor por defecto
text Contenido del texto del título. Chart title
align Alineación horizontal. center
verticalAlign Alineación vertical. top
margin Espacio entre el título y el subtítulo o el área principal del gráfico. 15
floating Si es flotante; si es true, el título puede desplazarse respecto al área principal del gráfico, puede usarse junto con las propiedades x e y. false
style Establecer estilo CSS. {color: '#3E576F',
fontSize: '16px'}

Subtitle: Opciones de subtítulo

Las opciones de atributos del subtítulo son similares a las del título; se pueden consultar las opciones de título anteriores. Cabe mencionar que la opción text del subtítulo tiene como valor por defecto '', es decir, vacía, por lo que por defecto el subtítulo no se muestra.

xAxis: Opciones del eje X

Las opciones del eje X se utilizan para establecer las propiedades relacionadas con el eje X del gráfico.

Parámetro Descripción Valor por defecto
categories Establecer los nombres de las categorías del eje X, array, por ejemplo: categories: ['Apples', 'Bananas', 'Oranges']. []
title Nombre del eje X; admite atributos como text, enabled, align, rotation, style, etc.  
labels Establecer el estilo (style), formato (formatter), ángulo (rotation), etc. de los nombres de cada categoría del eje X. array
max Valor máximo del eje X (cuando categories está vacío); si es null, el máximo se ajusta automáticamente según los datos del eje X. null
min Valor mínimo del eje X (cuando categories está vacío); si es null, el mínimo se ajusta automáticamente según los datos del eje X. array
gridLineColor Color de la cuadrícula (línea vertical). #C0C0C0
gridLineWidth Ancho de la cuadrícula (línea vertical). 1
lineColor Color de la línea base. #C0D0E0
lineWidth Ancho de la línea base. 0

yAxis: Opciones del eje Y

Las opciones del eje Y son básicamente iguales a las opciones de xAxis anteriores; consulte los parámetros de la tabla anterior, no se enumeran por separado.

Series: Opciones de series de datos

Las opciones de la serie de datos se utilizan para establecer las propiedades relacionadas con los datos que se muestran en el gráfico.

Parámetro Descripción Valor por defecto
data Serie de datos que se muestra en el gráfico; puede ser un array o datos en formato JSON. Por ejemplo: data:[0, 5, 3, 5], o
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]		 ''
name Nombre de la serie de datos mostrada. ''
type Tipo de serie de datos; admite area, areaspline, bar, column, line, pie, scatter o spline. line

plotOptions: Opciones de puntos de datos

plotOptions se utiliza para establecer las propiedades relacionadas con los puntos de datos en el gráfico. Según el tipo de gráfico, la configuración de propiedades varía ligeramente; a continuación se enumeran las opciones más comunes.

Parámetro Descripción Valor por defecto
enabled Si se muestra el dato directamente sobre el punto de datos. false
allowPointSelect Si se permite seleccionar puntos de datos con el mouse. false
formatter Función de retorno (callback) para formatear el contenido mostrado de los datos. formatter: function() {return this.y;}

Tooltip: Cuadro de información de puntos de datos

Tooltip se utiliza para configurar la información emergente que se muestra al pasar el mouse sobre un punto de datos.

Parámetro Descripción Valor por defecto
enabled Si se muestra la información emergente. true
backgroundColor Establecer el color de fondo de la información emergente. rgba(255, 255, 255, .85)
borderColor Color del borde de la información emergente; por defecto se iguala automáticamente al color de la serie de datos. auto
borderRadius Radio de las esquinas de la información emergente. 5
shadow Si se muestra sombra en la información emergente. true
style Establecer el estilo del contenido de la información emergente, como el color de fuente, etc. color:'#333'
formatter Función de retorno (callback) para formatear el contenido de salida de la información emergente. El contenido devuelto admite etiquetas HTML como: <b>, <strong>, <i>, <em>, <br/>, <span>. 2

Legend: Opciones de leyenda

legend se utiliza para configurar las propiedades relacionadas con la leyenda.

Parámetros Descripción Valor predeterminado
layout Forma de visualización, admite horizontal (horizontal) y vertical (vertical) horizontal
align Método de alineación. center
backgroundColor Color de fondo de la leyenda. null
borderColor Color del borde de la leyenda. #909090
borderRadius Ángulo del borde de la leyenda 5
enabled Si mostrar la leyenda true
floating Si puede flotar, junto con las propiedades x, y. false
shadow Si mostrar sombra false
style Establecer el estilo del contenido de la leyenda ''

Para más detalles, consulte la documentación en inglés del sitio web oficial de Highcharts:http://api.highcharts.com/highcharts

Otras extensiones