Как добавить метки осей и сетку в диаграмму raphael

У меня возникли проблемы с гистограммой g.raphael. Вот мой примерКак добавить метки осей и сетку в диаграмму raphael

var paper = Raphael("holder"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26,36,55,60,80]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper); 
 
//paper.path("M100 40L100 320").attr({ stroke: '#ccc' }); 
 
\t 
 
var paper = Raphael("holder1"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script> 
 
<script src="https://raphael4gwt.googlecode.com/svn/trunk/raphael4gwt/src/org/sgx/raphael4gwt/public-graphael/graphael/g.bar.js"></script> 
 

 
<html> 
 
    <body> 
 
<div id="holder"></div> 
 
<br/> 
 
<div id="holder1"></div> 
 
    </body> 
 
</html>

Вопросы:

Как остановить от баров становится все меньше и больше? первый пример имеет 6 баров, а второй - 3 бара, поэтому во втором примере все больше, поэтому оно не совпадает с меткой на оси y.
Как добавить сетку к гистограмме? Я попробовал рисовать его с помощью элемента path, но он не выравнивается по мере того, как столбцы становятся все больше и меньше по сравнению с передаваемыми значениями.

Благодаря Ved

источник

2014-09-19 Zeus

Я знаю, что это несколько месяцев, надеюсь, мои ответы помогут вам или кому-то в будущем.

Так что происходит несколько вещей, которые вызывают эти проблемы. Бары масштабируются как в x, так и в y, чтобы заполнить доступную высоту и ширину, которые даны в таблице при вызове paper.barchart. Таким образом, один из способов противодействовать этому - передать значения фиктивных значений 0 так, чтобы ширина полосы была одинаковой.

Для масштабирования по высоте вам необходимо установить опцию «to» на баррикаде, чтобы получить штрихи к соответствующему значению.

Отъезд plunker Я сделал показ ваших данных. Вот один из вызовов создания диаграммы:
```
var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    { 
     to: 100 
    }); 
```
Что я сделал, чтобы решить эту проблему, был изменить функцию оси для рисования линий сетки в тех же местах, что и тир.

Надеюсь, что это поможет.

источник

2015-03-13 15:04:46

Как добавить метки осей и сетку в диаграмму raphael

ответ

Смежные вопросы