Как добавить метки осей X и Y на диаграммах Raphael js - PullRequest
Новая
       39

Как добавить метки осей X и Y на диаграммах Raphael js

1 голос
/ 13 ноября 2011

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

Кто-нибудь знает, как динамически масштабировать значение оси y, так как я понял, что как только значения пересекают> 500, графики вообще не отображаются, отображаются только оси с точками на крайних кромках в одной строке (т.е. через край).

Во-вторых, есть ли способ добавить легенды или метки осей на графики? Или графические метки должны кодироваться отдельно как html?

Большое спасибо !!! Это отличный инструмент, но он кажется совершенно бесполезным ...

1 Ответ

4 голосов
/ 28 ноября 2011

На графике g.bar.js нет возможности рисовать оси. Однако, если вы загляните внутрь g.line.js, вокруг строк 98-117 (в настоящее время) есть блок кода, который рисует оси: 

    var allx = Array.prototype.concat.apply([], valuesx),
        ally = Array.prototype.concat.apply([], valuesy),
        xdim = chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
        minx = xdim.from,
        maxx = xdim.to,
        ydim = chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
        miny = ydim.from,
        maxy = ydim.to,
        kx = (width - gutter * 2) / ((maxx - minx) || 1),
        ky = (height - gutter * 2) / ((maxy - miny) || 1);

    var axis = paper.set();

    if (opts.axis) {
        var ax = (opts.axis + "").split(/[,\s]+/);
        +ax[0] && axis.push(chartinst.axis(x + gutter, y + gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 2, paper));
        +ax[1] && axis.push(chartinst.axis(x + width - gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 3, paper));
        +ax[2] && axis.push(chartinst.axis(x + gutter, y + height - gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 0, paper));
        +ax[3] && axis.push(chartinst.axis(x + gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 1, paper));
    }

Это может быть эффективно скопировано и вставлено в функцию VBarchart в g.bar.js, чтобы дать вам опции осей. Потребуется небольшая корректировка по позициям x и y, и, вероятно, для правильного масштабирования следует установить maxy на opts.total - да, вам нужно будет немного поэкспериментировать с ним, но это работает.

...