Документация Graphael, последние образцы и т. Д.

Question

Я работаю над реализацией динамического обновления линейного графика с использованием gRaphael , который является графическим расширением библиотеки SVG Raphael .

Кажется, я не могу найти примеров того, как кто-то делал это в качестве проекта обновления почти в реальном времени, и это нормально. Я предполагаю, что есть способ вызвать обновление графа с новым набором данных (без необходимости каждый раз заново инициализировать целый новый объект Raphael!), Но в этом заключается проблема:

Кажется, нигде нет точной документации. Я обнаружил этот вопрос StackOverflow: График графика , который, в свою очередь, привел к этому проекту документации: https://github.com/kennyshen/g.raphael/tree/master/docs, но результаты были холодными. Используя приведенные примеры, я столкнулся с некоторыми ошибками:

1. синтаксис r.g.linechart(), использованный в примерах, больше не действителен (где r - это объект Рафаэля, и я предполагаю, что g - это свойство gRaphael внутри). Где-то по пути кто-то должен был переключиться на правильное расширение объекта Рафаэля, чтобы r.linechart() работал.

2. Параметры, переданные в linechart(), были неверными, что снова привело к неопределенной ошибке. Если бы я передал только параметры #x, #y, width, height, arrayX, arrayY и отбросил метки диаграммы и т. Д., Я мог бы отобразить простую линию. Но, конечно, мне нужно иметь возможность маркировать свои топоры и предоставлять легенду и т. Д.

Излишне говорить, что библиотека без документа API не принесет никому особой пользы, но есть стойкие приверженцы, которые хотят учиться, основываясь исключительно на чтении самого кода. Я не из тех. Я бы, наверное, сделал хорошо с хорошо прокомментированным примером, желательно используя живые обновления.

Итак, я думаю, что вопросы:

1. Кто-нибудь знает лучшую документацию, чем та, на которую я ссылался?
2. Может кто-нибудь указать мне на примеры, документация не работает?
3. Может ли кто-нибудь предоставить правильную детализацию параметров, которые linechart() примет?

Спасибо!

Для справки, вот как далеко я до сих пор:

var r = Raphael('line-chart');

// did NOT work -->
var linechart = r.g.linechart(
  10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], 
  {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"}
);

// worked in a limited way, rendering a plain line with no visible labels/graph -->
var linechart = r.linechart(
  10,10,300,220,[1,2,3,4,5],[10,20,15,35,30]
);

Answer 1

Я все еще пытаюсь выучить Рафаэля сам, но вот основные ресурсы, которые я использовал: http://g.raphaeljs.com/reference.html и то же самое без "g"

Вот скрипка, которая в значительной степени использует обновленную линейную диаграмму с помощью knockout / gRaphael, вероятно, не лучшее решение, но это идея: http://jsfiddle.net/kcar/mHG2q/

Просто примечание, я не начал изучать его, пока не совместил чтение с методом проб / ошибок (с большим количеством ошибок), поэтому поиграйте с скрипкой и посмотрите, как все изменится.

но основной код для него выглядит так:

//constructor
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
    .hoverColumn(function () {  //this function sets the hover tag effect
        this.tags = r.set();

    for (var i = 0, ii = this.y.length; i < ii; i++) {
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
        }
    }, function () {
        this.tags && this.tags.remove();
        });

lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbols

Answer 2

В GitHub есть fork, который работает над документацией и примерами.

Вам нужно будет загрузить код и просмотреть его со своего компьютера. Это работа в процессе, но это больше, чем вы можете найти на официальной странице g.Raphael.

Я также нашел этот небольшой пост с некоторыми примерами.