Блог

Главная - Вопросы по программированию - Группировка данных не работает в диаграмме react high

Группировка данных не работает в диаграмме react high

#javascript #reactjs #react-functional-component #react-highcharts

Вопрос:

у меня есть компонент без состояния и глобально определенный объект chartoptions

 const stockOptions = {
    title: {
    text: 'Sales and Profit Chart',
    align: 'left',
    style: { fontFamily: 'Roboto', fontWeight: 500, fontSize: 20 }
  },
  series:[{
    type: 'spline',
    name: 'Net Profit',
    data: [1,2,3,4,5,56,54,45,56,3,2,32,3,5,546,65,6768,678,678,85,45,34,1,2,3,4,5,56,54,45,56,3,2,32,3,5,34],
    dataGrouping:{units:[['month',[1]]], enabled:true}
  },
  {
    type: 'spline',
    name: 'Units',
    data: [1,2,3,4,5,56,54,45,56,3,2,32,3,5,546,65,6768,678,678,85,45,34,32,3,5,546,65,6768,678,678,85,45,34],
    dataGrouping: {
      units: [["week", [1]]],
      enabled: true,
    },
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[4],
      fillColor: 'white'
    }  
  }, 
],
}

и внутри функции я определил состояние с помощью react hook useState, и внутри этого состояния я передал весь объект chartoption

 const [stockChart, setStockChart] = useState(stockOptions);

и для группировки данных я обновляю, используя функцию on cahnge, и обновляю состояние таким образом

 //unit is is passing as day, month, year etc.

stockChart.series.forEach((ser) => {
      ser.dataGrouping.units = [[[unit], [1]]];
    });
    setStockChart(stockChart);

Комментарии:

1. проблема решается с помощью крючка useRef для получения экземпляра диаграммы высокого уровня и с помощью метода обновления для рядов для обновления единиц для группирования данных, таких как « chart.series.forEach((ser) => { ser.update({ Группировка данных: { единицы: [[единица, [1]]], включено: true, принудительно: true}}, ложь); }); «

Метки: