Мульти серия не работает в гистограмме в Recharts - PullRequest
Новая
       7

Мульти серия не работает в гистограмме в Recharts

0 голосов
/ 31 октября 2019

Мне нужно создать гистограмму с одним из форматов ниже. данные1 или данные2 

const data1 = [ { day: 'ABC', data :[ {job_name: "Mon", value: 4}, {job_name: "Tue", value: 5}, {job_name: "Thu", value: 18}, {job_name: "Fri", value: 5} ] }, { day: 'DEF', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Fri", value: 8} ] }, { day: 'XYZ', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Thu", value: 8} ] } ];

const data2 = [ { day: 'Mon', data :[ {job_name: "ABC", value: 4}, {job_name: "DEF", value: 5}, {job_name: "XYZ", value: 8} ] }, { day: 'Tue', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Wed', data :[ {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Thu', data :[ {job_name: "ABC", value: 12}, {job_name: "XYZ", value: 18} ] }, { day: 'Fri', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15} ] } ];

1 Ответ

0 голосов
/ 06 ноября 2019

Короткий ответ, вы не можете. Форма данных в ваших образцах не подходит для Rechart.

Пожалуйста, посмотрите документацию Rechart - BarChart -> data и соответственно измените ваши данные.

Вот пример необходимого формата данных с той же страницы: 

const data = [
  {
    "name": "Page A",
    "uv": 4000,
    "pv": 2400,
    "amt": 2400
  },
  {
    "name": "Page B",
    "uv": 3000,
    "pv": 1398,
    "amt": 2210
  }

Где name - метка данных оси X, а uv, pv и amt - значенияиз серии данных.

Итак, еще несколько примеров: 

const data = [
  {
    "name": "2019-11-01",
    "morning_temp": 8,
    "midday_temp": 14,
    "evening_temp": 10
  },
  {
    "name": "2019-11-02",
    "morning_temp": 5,
    "midday_temp": 18,
    "evening_temp": 7
  },
   ...

Хотя, исходя из моего собственного опыта, изменение формы, которую вы имеете, может быть сложной задачей и, возможно, приведет к функции высокой сложности. Если вы не можете изменить форму данных, вы можете взглянуть на response-vis -> sample , так как форма данных response-vis 'больше похожа на ваши образцы.

В любом случае данные должны быть в правильной форме.

...