0
271
VistasCómo configurar menos datos de xAxis con más datos de gráfico de columnas en gráficos altos
Aquí está mi código de archivo ts
xAxis:{ categories:['row-1','row-2','row-3','row-4'], max:3 }, plotOptions:{ column:{ stacking:'normal' } } series:[ { type:'column', data:[12,23,34,45,56,67,78,89,90] },{ type:'column', data:[12,32,43,54,65,76,87,98,91] } ] A continuación se muestra mi código de trabajo. Quiero el xAxis tal como está y necesito todos los datos ingresados en la serie. Soy nuevo en highcharts así que por favor
Usé max para que mi xAxis no se extendiera e intenté de todas las formas posibles pero no puedo obtener el resultado CÓDIGO STACKBLITZ
La imagen de abajo es cómo quiero que sea mi gráfico
2 Respuestas
Responde la pregunta0
La forma más fácil de lograrlo es agregando cadenas vacías a las categorías.
xAxis: { categories: ['', 'row-1', '', 'row-2', '', 'row-3', '', 'row-4', ''] },Demostración: https://jsfiddle.net/BlackLabel/8uy9vo0t/
También puede usar labels.formatter para agregar categorías directamente a las posiciones relevantes en el eje.
xAxis: { tickLength: 0, labels: { formatter: function() { let position = 1; for (let i = 0; i < categories.length; i++) { if (this.pos === position) { return categories[i] } position = position + 2 } } }, },Demostración: https://jsfiddle.net/BlackLabel/a1jv9nqL/
Referencia de la API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Otro enfoque sería usar el módulo de Categorías agrupadas .
xAxis: { tickWidth: 0, labels: { style: { visibility: 'hidden', fontSize: '0px', }, groupedOptions: [{ style: { visibility: 'visible', fontSize: '12px', }, }], }, categories: [{ name: "row-1", categories: ["0", "1"] }, { name: "row-2", categories: ["0", "1"] }, { name: "row-3", categories: ["0", "1"] }, { name: "row-4", categories: ["0", "1", "2"] } ] },Demostración: https://jsfiddle.net/BlackLabel/3nkeswL5/
Documentación: https://blacklabel.github.io/grouped_categories/
También puede considerar usar columnas apiladas y agrupadas si su estructura de datos se puede modificar.
Demostración oficial: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped
-1
Diabetes en chilenos y chilenas