SVG - графики charts
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
VcorpJS содержит компактное тестовое средство контролируемой сборки SVG-изображений, с гибкой вставкой произвольных элементов, обработчиков, стилей, скриптов. Можно создавать и комбинировать собственные "живые" SVG-элементы и рисунки в виде текстовой строки произвольной сложности.
Нет нужды в специализированных графических JavaScript-библиотеках в несколько сотен килобайт, если вы не собираетесь профессионально работать с графикой.
К тому-же, если хоть немного разбираться в SVG, то можно работать достаточно профессионально и без специализированных библиотек-монстров.
См. ниже Примеры создания графиков, а также SVG - графики (примеры)
Автор сделал этот "велосипед" для решения некоторых задач и обязан его документировать (обязательно будут изменения, текущий вариант "хоть что-то есть").
Постарался сделать универсальную сборку простых графиков, при этом размер JS-функции gChart() получился около 2Кб, а фантазия разработчика безгранична.
.gChart( object , array [, flag ] )
Создает и возвращает полноценный SVG-рисунок или его содержимое (произвольный график) в виде текстовой строки.
object - объект с параметрами / стилями / обработчиками создаваемого SVG-изображения.
array - массив с подмассивами - данными и произвольными классами / стилями / обработчиками для каждого элемента создаваемого графика.
flag - флаг возврата готового SVG-рисунка (по-умолчанию), или только его содержимого для вставки в другой SVG-рисунок.
object = {
type : Тип графика (строка String). Если параметр отсутствует, то "recth" - горизонтальные полосы. Возможные типы:
"recth" или "rectv" - прямоугольники, расположенные горизонтально (recth) или вертикально ("rectv");
"line" - набор линий и эллипсов на стыках;
"circle" - круговая диаграмма.
vbw : Ширина внутренней канвы viewBox для SVG (если отсутствует или менее 1, то 100), приводится к целому значению.
vbh : Высота внутренней канвы viewBox для SVG (если отсутствует или менее 1, то 100), приводится к целому значению.
Нет смысла указывать слишком мелкие значения канвы (менее 10 или даже 100) - это нужно в очень редких случаях.
pd : padding - отступ от краёв канвы. Если отсутствует, то 0. Может быть массивом [top,right,bottom,left] - с числовыми значениями отступа для каждой из сторон.
max : Максимально возможное значение, принимаемое за 100% (набор значений передаётся в массиве array).
Если отсутствует или 0, то максимальным считается самое большое из списка переданных значений в массиве array;
Для type=='circle' параметр max игнорируется - для круговой диаграммы всегда считается сумма всех значений, принимаемая за 360 градусов (вместо процентов).
gps : Только для "recth" или "rectv" - количество элементов (блоков/полос) в группе (если отсутствует или <1, то 1).
Если общее количество элементов (подмассивов array) не кратно кол-ву групп, отступы будут считаться неверно.
sep : Проценты от размера канвы (число). Для type=='circle' этот параметр игнорируется.
Для "recth" или "rectv" - расстояние между группами полос в процентах от толщины полосы (если отсутствует, то 0).
Для "line" - радиусы эллипсов (если sep - массив [pRx,pRy]) или окружностей (если sep - число) в местах соединения линий,
указывается в процентах от vbw / vbh - выводится пропорционально при любых отношениях длины к высоте канвы графика.
Если не массив, то выводятся кружки, а не эллипсы, радиусом в указанных процентах от высоты канвы vbh.
sw : stroke-width - толщина линий и границ контуров. Если указан, то перекрывает значение любых указанных или наследуемых значений стиля для stroke-width.
swc : stroke-width - толщина контура эллипсов/окружностей, используется только для type=="line".
Если sw или swc не указан или имеет не тип "number", то соответствующая параметру величина stroke-width определяется по умолчанию.
fix : Количество знаков после десятичной точки для всех рассчитанных координат внутри SVG-блоков.
Используется для сокращения текста SVG-блоков. fix приводится к целому значению (1-10).
Чем меньше размер канвы (vbw или vbh), тем критичнее минимальное значение fix, но как правило 3 знака достаточно для нормального отображения графиков даже при размере канвы 1. По-умолчанию округление производится до 3-х знаков после запятой (если fix не указан или указан вне диапазона 1-10).
head : Произвольная текстовая вставка в заголовок (открывающий тег) SVG-файла (до первой угловой скобки ">"). Может отсутствовать.
Пример вставки: ' id="id02568" class="svg1" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."...'
head не должен содержать атрибут "viewbox" - этот атрибут формируется и вставляется автоматически согласно параметрам vbw и vbh
after : Строка - произвольные SVG-блоки для вставки перед SVG-блоками формируемого графика. Может отсутствовать или содержать любые SVG-изображения,
ещё сюда можно запихнуть персональные стили '<style>...</style>' и скрипты '<script>...</script>' и т.д. и т.п.
before : Строка - произвольные SVG-блоки для вставки после SVG-блоков формируемого графика. Может отсутствовать или содержать любые SVG-изображения.
}
array - Содержит сколько угодно вложенных массивов, каждый из которых описывает одну полосу, или одну линию+эллипс, или один сектор (для круговой диаграммы)
Содержимое вложенных массивов:
array[n][0] - числовое значение (от 0 и выше).
array[n][1] - произвольная текстовая вставка для созданного графического контура или линии или сектора. Или пустая строка.
Например: 'class="fill fill1" onclick="..." '
array[n][2] - Только для type=='line' - произвольная текстовая вставка для созданного эллипса. Или пустая строка.
Например: 'class="circ circ11" style="fill:white" onclick="..." '
flag - флаг возврата. Если отсутствует или false/0, то возврат полноценного SVG-изображения,
если flag указан, то возврат строки с содержимым созданного SVG, для последующей вставки в object.after и/или object.before
Таким способом можно накладывать один график на другой, экономя размер результирующего SVG-изображения.
Примеры создания графиков charts
Допустим, у нас есть такие CSS-классы:
.svg1 { width:200px; height:200px; stroke:#000080; stroke-width:0; border:solid 1px #e8e8e8; }
.fill { cursor:pointer; fill:#000080; stroke-linecap:round; }
...
.fill1 { fill:rgba(128,128,255,0.7); stroke:rgba(128,128,255,0.7); }
.fill1:hover { fill:rgba(128,128,255,1); stroke:rgba(128,128,255,1); }
...
.circ11 { fill:rgba(128,128,255,0.7); } .circ11:hover { fill:rgba(128,128,255,1); }
...
Допустим, у нас есть такой JS-код:
var i, buf, obj = {
type : "recth",
vbw : 100,
vbh : 100,
pd : 0, /* [0,0,0,0] */
max : 0,
gps : 2,
sep : 20, /* [0,0] */
sw : "",
swc : "",
fix : 1,
head : 'class="svg1"',
after : "",
before : ""
},
param = [
[800, 'class="fill fill1" onclick="alert(1)"', 'class="fill circ11" onclick="alert(11)"' ],
[700, 'class="fill fill2" onclick="alert(2)"', 'class="fill circ12" onclick="alert(12)"' ],
[300, 'class="fill fill3" onclick="alert(3)"', 'class="fill circ13" onclick="alert(13)"' ],
[900, 'class="fill fill4" onclick="alert(4)"', 'class="fill circ14" onclick="alert(14)"' ],
[500, 'class="fill fill5" onclick="alert(5)"', 'class="fill circ15" onclick="alert(15)"' ],
[150, 'class="fill fill6" onclick="alert(6)"', 'class="fill circ16" onclick="alert(16)"' ],
[800, 'class="fill fill7" onclick="alert(7)"', 'class="fill circ17" onclick="alert(17)"' ],
[400, 'class="fill fill8" onclick="alert(8)"', 'class="fill circ18" onclick="alert(18)"' ]
];
/* Вывод графика 1 (горизонтальные блоки по 2 в группе) */
VcorpJS.id("myId1...").innerHTML = VcorpJS.gChart(obj, param);
/* Вывод графика 2 (вертикальные блоки) */
obj.type = 'rectv'; obj.gps = 0;
VcorpJS.id("myId2").innerHTML = VcorpJS.gChart(obj, param);
/* Вывод графика 3 (круговая диаграмма) */
obj.type = 'circle';
VcorpJS.id("myId3").innerHTML = VcorpJS.gChart(obj, param);
/* Вывод графика 4 (линии и эллипсы/круги) */
obj.type = 'line'; obj.pd=[10,0,10,0]; obj.sw=1; obj.swc=0.1; obj.sep=5;
VcorpJS.id("myId4").innerHTML = VcorpJS.gChart(obj, param);
/* Запомним содержимое графика "rectv" */
obj.vbw=300; obj.vbh=100; obj.pd=0; obj.sep=30; obj.sw=""; obj.type = 'rectv';
buf = VcorpJS.gChart(obj, param, 1);
/* Далее немного подправим параметры для линий и эллипсов */
for(i=0; i<param.length; i+=1){
param[i][0]/=2;
param[i][1] = 'class="fill" style="stroke:rgba(0,0,128,0.5)"';
param[i][2] = 'class="fill circ1'+(i+1)+'" onclick="alert('+(i+11)+')"';
}
obj.sep=7; obj.max=900; obj.sep=7; obj.sw=5;
obj.type = 'line';
obj.head += ' style="width:450px; height:180px; stroke-width:2"';
obj.after = buf;/* вывод запомненного графика "rectv" */
VcorpJS.id("myId5").innerHTML = VcorpJS.gChart(obj, param);
У нас должно примерно получиться следующее (демо-код не проверял, подробности см. через средства разработчика):
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.