Estoy tratando de agregar color de fondo a los espacios en los datos para que sean más visibles en intervalos largos, sé que puedo hacerlo agregando vínculos con el color que quiero, el problema es que no tengo el inicio y el final del espacio. porque se crea definiendo GapSize y GapUnit (sin fechas con datos nulos, solo un espacio en las fechas). Intenté agregar los enlaces de trama calculando la diferencia entre las fechas y comparándola con el intervalo de tictac, pero hasta ahora no tuve suerte,
aquí hay un ejemplo de espacios establecidos con gapsize
plotOptions: { series: { gapSize: 1 } }¿Hay una forma más sencilla de hacer esto?
Gracias
Highcharts agrega internamente puntos nulos para crear espacios. Puede obtener los puntos nulos calculados y, en función de sus valores, crear bandas gráficas.
Por ejemplo:
let plotBands = []; let allowChartUpdate = true; (function(H) { H.wrap(H.seriesTypes.area.prototype, 'getGraphPath', function(proceed, points) { const xAxis = this.xAxis; plotBands = []; points.forEach((p, index) => { if (p.isNull) { plotBands.push({ from: points[index - 1] ? points[index-1].x : xAxis.min, to: points[index + 1] ? points[index+1].x : xAxis.max, color: 'red' }); } }); return proceed.apply(this, Array.prototype.slice.call(arguments, 1)); }); }(Highcharts)); Highcharts.stockChart('container', { chart: { type: 'area', events: { render: function() { // prevent infinity loop if (allowChartUpdate) { allowChartUpdate = false; this.xAxis[0].update({plotBands}); allowChartUpdate = true; } } } }, ... });Demostración en vivo: https://jsfiddle.net/BlackLabel/jz0n28om/
Referencia de la API: https://api.highcharts.com/highcharts/xAxis.plotBands
Documentos: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts