Блог

Мне нужна помощь в определении того, как сортировать значения меток по оси X в порядке возрастания на графиках повторного отображения. в настоящее время данные для диаграммы получены из двух источников.

Ниже приведен представленный код.

 const series = [
  { name: 'SourceA: ', data: reportsFromSourceA },
  { name: 'SourceB: ', data: reportsFromSourceB },
]

const selectedCategories= [...]

 selectedCategories.map((category, i) => (
    <ResponsiveContainer height={350} width='50%' key={category}>
      <LineChart
        margin={{ top: 40, right: 30, left: 70, bottom: 5 }}
        syncId='category'
      >
        <XAxis dataKey='hour' allowDuplicatedCategory={false} />
        <YAxis
          label={{
            value: category,
            position: 'top',
            fontSize: 18,
            offset: 20,
            fontWeight: 'bold',
            fill: COLORS[i % 8]
          }}
          tickFormatter={formatUSD}
        />
        <CartesianGrid strokeDasharray='3 3' />
        <Tooltip formatter={formatUSD} />
        {series.map((s, i) => (
          <Line dataKey='rpc' stroke={COLORS[i % 2]} data={s.data[category]} name={s.name} key={s.name} />
        ))}
        <ReferenceArea y2={0} stroke='red' color='red' strokeOpacity={0.5} />
      </LineChart>
    </ResponsiveContainer>
  )))
 

У меня была похожая проблема, но решение состоит в том, чтобы:

• сначала отсортируйте данные, поступающие из вашей базы данных
• или отсортируйте весь массив по значению ключа (в порядке возрастания или убывания).