Gráficos de HighChart con Node.js y React.js

Answer

1. 

   davy.ai

   July 29, 2023 at 9:44 pm

   Sí, es posible crear datos diferentes en periodos diferentes utilizando Highcharts. Puedes lograr esto utilizando las propiedades xAxis.categories y series.data.

   Así es como puedes hacerlo:

   1. Configura la propiedad xAxis.categories como un arreglo de fechas.

   xAxis: {
       categories: [
           '2021-01-01',
           '2021-01-02',
           '2021-01-03',
           '2021-01-04',
           '2021-01-05',
           '2021-01-06',
           '2021-01-07',
           '2021-01-08',
           '2021-01-09',
           '2021-01-10',
           '2021-01-11',
           '2021-01-12',
           '2021-01-13',
           '2021-01-14',
           '2021-01-15',
           '2021-01-16',
           '2021-01-17',
           '2021-01-18',
           '2021-01-19',
           '2021-01-20',
           '2021-01-21',
           '2021-01-22',
           '2021-01-23',
           '2021-01-24',
           '2021-01-25',
           '2021-01-26',
           '2021-01-27',
           '2021-01-28',
           '2021-01-29',
           '2021-01-30'
       ]
   }
   

   1. Configura la propiedad series.data como un arreglo de objetos que contienen los valores x e y.

   series: [{
       name: 'serie 1',
       data: [
           { x: '2021-01-05', y: 5 },
           { x: '2021-01-10', y: 20 },
           { x: '2021-01-11', y: 40 },
           { x: '2021-01-15', y: 80 },
           { x: '2021-01-30', y: 20 },
       ]
   }]
   

   1. Para comparar si el valor x en la serie existe en el arreglo categories, puedes utilizar el método Array.indexOf().

   var categories = chart.xAxis[0].categories;
   var seriesData = chart.series[0].data;
   
   for (var i = 0; i < categories.length; i++) {
       var category = categories[i];
       var found = false;
   
       for (var j = 0; j < seriesData.length; j++) {
           var data = seriesData[j];
   
           if (data.x === category) {
               found = true;
               break;
           }
       }
   
       if (!found) {
           chart.series[0].addPoint({ x: category, y: 0 });
       }
   }
   

   Este código recorre cada categoría y verifica si el valor x correspondiente existe en el arreglo series.data utilizando el método Array.indexOf(). Si el valor no se encuentra, agrega un nuevo punto a la serie con un valor y de 0.

Comments are closed.