Raphael: Paper.print() и шрифты

В Paper.print() используется шрифт, получаемый с помощью Paper.getFon():

var txt = r.print(10, 50, "print", r.getFont("Tahoma"), 30).attr({fill: "#fff"});

Проблема в том, что по-умолчанию доступных шрифтов нет вообще. Чтобы  тот же самый Tahoma стал доступен, его нужно сначала зарегистрировать вызовом Raphael.registerFont(). Возникает вопрос: откуда взять сам шрифт для регистрации? Ответ - его нужно куфонизировать из обычного ttf-шрифта (или otf и пр.), т.е. выполнить преобразование глифов шрифта в svg-шные path-ы. Сделать это можно с помощью онлайн-приложения http://cufon.shoqolate.com/generate/. Получаемый на выходе js-файл нужно немного подправить, заменив в нем объект Cufon, в котором регистрируется шрифт, на Raphael. После подключения данной js-ки шрифт можно использовать в getFont().

gRaphaël piechart: параметры конфигурации

Ввиду отсутствия документации пришлось рыться в исходниках чтобы хотя как-то понять, какие параметры конфигурации можно передавать при создании piechart`а. 

Во-первых, параметры конфигурации передаются 5 параметром функции piechart, после x и у координат центра piechart`а, его радиуса и массива данных. Параметры следующие (не претендую на полноту списка, но это хоть что-то):

• legend - массив легенд к секторам (i-ый элемент массива будет легендой к сектору, построенному для i-ого элемента массива данных)
• legendpos - позиция легенды. Возможные значения: "east", "west", "south", "north". При положении "west" легенда при не совсем коротких надписях налезает на сам пайчарт, как подвинуть легенду подальше, не трогая исходников, я не нашел
• legendcolor - цвет текста легенды (в css-формате)
• stroke - цвет обводки чарта (круговой и границ секторов)
• strokewidth - ширина обводки
• colors - массив цветов секторов. Что важно (и очень неудобно), цвета следуют не в том порядке, в каком следуют данные и легенда, а в порядке уменьшения размера сектора. Баг, связанный с игнорированием этой настройки в случае, когда пай содержит единственный сектор, я описал тут (в т.ч. и исправление этого бага).

Вот небольшой пример настройки пайчарта:

pieChart = pieChartCanvas.piechart(
PIECHART_CANVAS_WIDTH/2,
PIECHART_CANVAS_HIEGHT/2,
PIECHART_RADIUS,
[22,12,1],
{
 legend: ["Доступно","Недоступно","Неизвестно"],
 legendpos: "east",
 legendcolor: "#ff1256",
 stroke: '#ff4467',
 strokewidth: 3,
 colors: ["#00ff00","#ff0000","#888888"]
}
);

Здесь  pieChartCanvas - результат выполнения функции Raphael(), PIECHART_CANVAS_WIDTH, PIECHART_CANVAS_HIEGHT и PIECHART_RADIUS - константы, задающие ширину и высоту области рисования (передаваемые также при её создании в функцию Raphael), а также радиус PieChart`а.

Рисование PieChart`ов на JavaScript

Во-первых, рисование PieChart`ов на клиенте имеет 2 разных варианта реализации:

• HTML 5
• SVG / VML

Для HTML 5 есть библиотека RGraph, но ввиду того, что не все пользователи ещё перешли на поддерживающие HTML5 браузеры, от неё было решено отказаться.

Очень функциональной рисовалкой PieChart`ов (и не только) с использованием SVG / VML является гугловский "Google Chart Tools" с одним лишь минусом - его JavaScript-код загружается с сайта google, поэтому в оффлайне чарты работать не будут.

Другой бесплатный вариант, распространяемый по лицензии MIT и  использующий SVG / VML - gRaphaël. Имеет неплохие возможности (правда, поменьше, чем у варианта от google), но вот с документацией очень-очень туго (я, по крайней мере пока, вообще её не нашел).