Изменить минимальное и максимальное значения оси Y в линейной диаграмме Рафаэля

Рассмотрим следующий код (извините, я не смог поместить его в jsfiddle):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.bar.js"></script>
<script src="g.line-min.js"></script>
<body>
<div style="width:500px;height:150px" id="div"></div>
<script>
            var r = Raphael("div",400,150),
                    fin = function () {
                        this.flag = r.popup(this.x, this.y, this.value || "0").insertBefore(this).attr([{fill: "#bbbbbb"}]); 
                    },
                    fout = function () {
                        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
                    },
                    txtattr = { font: "12px sans-serif" };
            var rr=r.linechart(0, 0, 400, 125, [0,1,2,3,4],[250,200,350,100,300], {axis: '0 0 1 0',axisxstep:4,symbol:'circle',width:1}).hoverColumn(fin, fout);
            rr.axis[0].attr([{fill: "#bbbbbb"}]);
</script>
</body>

Я хочу начать ось Y с 0 и закончить выше максимального значения ряда данных, чтобы всплывающая подсказка отображалась правильно. Как я могу установить минимальные и максимальные значения по оси Y, переопределяя поведение по умолчанию.

Источник

1 ответ

Решение

gRaphael не предоставляет возможности сделать это. На самом деле, похоже, что на Raphael или gRaphael нет активной разработки или поддержки.

Так что единственный способ сделать это - взломать g.line.js. Значения, которые вы ищете, находятся в строке 109-114:

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,

Значение xdim а также ydim определяет диапазон вашей диаграммы относительно ваших значений на графике. Объект, возвращаемый .snapEnds() принимает эту форму: { from: INT, to: INT, power: INT }, Я понятия не имею, что power Часть делает, но она не используется в g.line.js, так что вы можете спокойно ее игнорировать. Что вы хотите, чтобы отредактировать from а также to свойства. Давайте выставим их на ваш выбор:

xdim = opts.xdim || chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
minx = xdim.from,
maxx = xdim.to,
ydim = opts.ydim || chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
miny = ydim.from,
maxy = ydim.to,

Теперь вы можете изменить значения из вашего Paper.linechart() Опция объекта:

paper.linechart(0, 0, w, h, x, y, {
    xdim: { from: 0, to: 100 },
    ydim: { from: 0, to: 100 }
});

Я надеюсь, что это работает для вас!

Пока вы работаете над этим, вы можете исправить эту ошибку, позволяя opts.gutter равняться нулю и в g.line.js. Или вы можете использовать это исправление, чтобы позволить вашим линейным диаграммам иметь пробел в них.

Источник
Другие вопросы по тегам