Блочная диаграмма с метками и осями, приспособленная к div с фиксированными размерами

Следуя приведенному примеру, я создал функцию, которая рисует коробчатую диаграмму в jQuery. вкладка аккордеона, которая имеет определенную фиксированную высоту и ширину. Количество отдельных категорий сильно варьируется в зависимости от входящих данных. В настоящее время я хотел бы добиться следующего в графике:

1) Добавьте оси и отображайте метки, как на этой картинке

2) Всегда подгоняйте коробки под ширину и высоту контейнера. В настоящее время я вижу, что если категорий слишком много, некоторые из них заканчиваются во второй строке, поэтому они не видны полностью. На картинке div содержит 7 полей, но только 4 помещаются в одну строку: введите здесь описание изображения

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


person amergin    schedule 18.09.2012    source источник


Ответы (2)


Я принял исходный пример d3.js, чтобы включить оси:

http://bl.ocks.org/jensgrubert/7789216

Вместо использования отдельных элементов svg, как в реализации Майка, здесь все диаграммы отображаются в одном корневом элементе. Это упрощает добавление осей.

Лучший, Йенс

person user3094508    schedule 12.12.2013
comment
Выглядит неплохо. Dc.js также недавно добавил поддержку графиков Fox Box, на которые также стоит обратить внимание. Демо здесь (ссылка обновлена). - person amergin; 04.06.2014

В настоящее время я использую хак, найденный на форуме Highcharts (jsfiddle здесь). Также есть реализация коробочного сюжета, сделанная с помощью Raphael.js, которая выглядит круто (github, пример)

person amergin    schedule 21.09.2012