Есть ли способ добавить линии сетки на линейный график gRaphael?

Question

У меня есть график, который я создал с помощью gRaphael. У него есть оси и отметки, но я бы хотел иметь линии сетки. Есть ли встроенный способ добиться этого или добавить библиотеку, которая может мне помочь?

Answer 1

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

Я нашел расширение под названием RaphAlytics и использовал его drawGrid() функционировать в тех случаях, когда мне понадобился ограничивающий прямоугольник с сеткой.

Вы можете адаптировать эту функцию для любого графа gRaphael, если это необходимо для рисования линий сетки. На линейном графике мне нужно было нарисовать горизонтальные линии сетки, которые были выровнены по меткам левой оси на линейном графике, поэтому я использовал эту функцию в качестве примера:

// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
    r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
        stroke : '#EEE'
    }).toBack();
}

Вот рабочая скрипка, чтобы проиллюстрировать этот пример: http://jsfiddle.net/KM3BB/1/

Answer 2

Я пытался сделать это вчера. Краткий ответ: gRaphaël не может сделать это для вас ни с какими вариантами линейных диаграмм, ни с осями, вы должны сделать это самостоятельно с Raphaël.
Что-то вроде:

var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);

Это означает, что под моей линейной диаграммой начертите путь, который начинается с 15 200,5 и рисует прямую линию до 310 200,5, перемещается до 15 180,5 и рисует линию до 310 180,5. Не спрашивайте меня, почему, но.5 важен для того, чтобы штрих был действительно 1px в ширину и сплошным черным. В противном случае кажется, что он имеет псевдоним шириной 2 пикселя при непрозрачности 50%. Вы должны сами рассчитать точное расположение относительно вашей линейной диаграммы.

Вы также можете играть с функцией дорожки на детской площадке, изменив r в paper,

Вы можете также рассмотреть возможность использования Google Chart Tools, если вы ищете такие вещи, как определение точного диапазона оси (в отличие от только минимума и максимума ввода).