Как интегрировать диаграммы и таблицы и сделать их динамическими c? - PullRequest
Новая
       36

Как интегрировать диаграммы и таблицы и сделать их динамическими c?

1 голос
/ 07 февраля 2020

У меня есть две таблицы: одна показывает историю продаж продавцов за год, а другая - историю продаж в месяцах. Как вы можете видеть на изображении ниже:

enter image description here

Мне нужно создать составной график (я считаю, что это составной график, так как он будет иметь больше, чем 01), что является точным представлением таблицы месяцев.

После создания графика, например, когда я нажимаю на продавца Miguel, график будет отображаться с историей этого продавца.

И, например, если я нажму на месяце 03 графика, таблица продавцов будет отображаться только с продажами, которые были сделаны за месяц 03.

Я не знаю, как это сделать Таким образом, мне удалось создать составную диаграмму, которая представляет те же данные, что и таблица месяцев, однако мне не удалось объединить мою диаграмму с моими таблицами.

enter image description here

Можете ли вы сказать мне, как я могу это сделать?

Я положил коды, которые я сделал в JSFiddle, вот ссылки:

Таблица продаж / месяц: https://jsfiddle.net/bernalvinicius/ejxcfpvz/15/

График месяца: https://jsfiddle.net/bernalvinicius/kanm158j/17/

* 1 039 * Заранее спасибо.

1 Ответ

1 голос
/ 07 февраля 2020

Просто поместите весь свой код в один и тот же файл (ы), объедините экземпляры перекрестного фильтра и поместите все диаграммы в одну группу диаграмм (по умолчанию), и все должно работать нормально.

Диаграмма группа является вторым параметром для каждого конструктора диаграммы. Если он не указан, то диаграмма переходит в группу диаграмм по умолчанию.

Когда какой-либо график отфильтровывается в группе диаграмм, он сообщает всем другим диаграммам в этой группе диаграмм о необходимости перерисовать, и они вытягивают свои диаграммы. новые данные из соответствующих групп кроссфильтров. (Извините за наименование, ad c. js группа диаграмм не имеет ничего общего с группой перекрестных фильтров.)

Чтобы объединить ваш код, я переименовал оба экземпляра перекрестного фильтра в cf , Затем я добавил новые поля, которые вы генерируете, в существующие строки вместо сопоставления данных: 

  data.forEach(d =>
    Object.assign(d,  {
      mes: d.Month,
      atual: d.Vendas_Ano,
      passado: d.Vendas_Ant
    })
  );

В скрипте таблицы вы инициализировали таблицу для каждой строки в данных с data.forEach(), который не был необходим. Вот почему загрузка была такой медленной.

Кроме того, обе скрипки имели одинаковую общую структуру, поэтому я просто скопировал и вставил код из скрипта таблицы в композитную скрипту, HTML, JS и CSS.

В JS я позаботился о том, чтобы поставить и те же строки снаружи и внутри обратного вызова d3.json(), как и раньше.

Похоже, это работает?

https://jsfiddle.net/gordonwoodhull/0q1y5ftr/15/

...