Я создал две диаграммы. Первый включает в себя комбинированную диаграмму коробчатых / площадных диаграмм. Второй - это цикл, который создает несколько параллельных полярных диаграмм. Вот jsfiddle: http://jsfiddle.net/civilsurfer/kw20pq8n/14/
Пожалуйста, раскройте диаграмму, чтобы под всеми полярными диаграммами была еще одна диаграмма.
Моя цель - сделать эту настройку максимально чувствительной к мобильным устройствам. Я хочу сделать это, чтобы верхняя диаграмма занимала верхние 80% высоты экрана, а вторая группа диаграмм (полярная) занимала нижние 20% высоты экрана.
Основная проблема, с которой я сталкиваюсь, заключается в том, что я создаю div (и оболочку) первой диаграммы в верхней части скрипта более простым способом, который я понимаю ..., а затем создаю div с помощью javascript ближе к нижней части JSFIDDLE JS (строка 981). То, что я хочу, это включить полярные диаграммы в div обертки. Вместо этого прямо сейчас полярные диаграммы строятся поверх диаграмм коробки / области. Здесь, вероятно, проблема в том, что я не знаю, как сделать этот div, который я создаю ниже (для полярных диаграмм), чтобы он помещался ниже диаграммы коробки / площади.
var container2 = document.createElement('div');
container2.style.cssText = 'position: relative; float: left; width: 5%;
height: 20%; margin-bottom: 0;'
document.body.appendChild(container2);
По общему признанию, я потратил кучу времени на создание диаграмм, но я не настолько хорош в CSS и интегрирую все эти части в хороший макет. Любая помощь будет высоко ценится.
Вот изображение общего макета / расстояния, которое я ищу. Я добился этого, задав высоту в пикселях для прямоугольника / диаграммы площади (800 пикселей), но на телефоне диаграмма слишком большая. Вот почему я хочу использовать% для высоты, надеясь, что на экране мобильного телефона, а также на экране компьютера будут отображаться как квадратные диаграммы, так и полярные диаграммы.
