Question

所以我的问题是我需要找到一种方法来制作下面代码创建的图形，以便将值保存到我在rails中创建的选票中。选票使用手动值，如最后一行代码所示，但我需要从图表中获取值以提交，我还需要找出一种方法将选票中的值加载到图表中。

到目前为止，我已经尝试过gon gem而没有运气让它开始工作，还尝试了一些其他不起作用的方法。

**editablegraph.html.erb**

<div class="container-fluid" id="graphT" style="width:300px;height:700px;">


<script style="text/javascript">

    var paper3 = Raphael("graphT");

    var val1T = 0 * 6;

    var val2T = 0 * 6;

    var val3T = 0 * 6;

    var val4T = 0 * 6;

    var val5T = 0 * 6;

    var begin1 = val1T;
    var begin2 = val2T;
    var begin3 = val3T;
    var begin4 = val4T;
    var begin5 = val5T;

var load = function()
{       
    paper3.clear();

    var bar1 = paper3.set();
    bar1.push(
        paper3.rect( 30, 650 - val1T, 40, val1T)
            .attr({
                fill : "80-#151515-#000", 
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val1T, 30))
            .attr({ 
                fill : "#000",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val1T, 30))
            .attr({ 
                fill : "90-#151515-#000",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 40, 630 - val1T, Math.floor(val1T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );


    var bar2 = paper3.set();
    bar2.push(
        paper3.rect( 86, 650 - val2T, 40, val2T)
            .attr({
                fill : "80-#151515-#39f",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val2T, 86))
            .attr({ 
                fill : "#39f",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val2T, 86))
            .attr({ 
                fill : "90-#151515-#39f",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 96, 630 - val2T, Math.floor(val2T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );


    var bar3 = paper3.set();
    bar3.push(
        paper3.rect( 142, 650 - val3T, 40, val3T)
            .attr({
                fill : "80-#151515-#73b",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val3T, 142))
            .attr({ 
                fill : "#73b",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val3T, 142))
            .attr({ 
                fill : "90-#151515-#73b",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 152, 630 - val3T, Math.floor(val3T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );

    var bar4 = paper3.set(); 
    bar4.push(
        paper3.rect( 198, 650 - val4T, 40, val4T)
            .attr({
                fill : "80-#151515-#ee1fa5",            
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val4T, 198))
            .attr({ 
                fill : "#ee1fa5",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val4T, 198))
            .attr({ 
                fill : "90-#151515-#ee1fa5",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 208, 630 - val4T, Math.floor(val4T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );

    var bar5 = paper3.set();
    bar5.push(
        paper3.rect( 254, 650 - val5T, 40, val5T)
            .attr({
                fill : "80-#151515-#26701c",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val5T, 254))
            .attr({ 
                fill : "#26701c",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val5T, 254))
            .attr({ 
                fill : "90-#151515-#26701c",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 264, 630 - val5T, Math.floor(val5T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
        );  

start = function () {
  this.odx = 0;
  this.ody = 0;
},
move1 = function (dx, dy) {
  val1T = begin1-dy;
  this.odx = dx;
  this.ody = dy;
  load();
},
move2 = function (dx, dy) {
  val2T = begin2 - this.ody;
  this.ody = dy;
  load();
},
move3 = function (dx, dy) {
  val3T = begin3 - this.ody;
  this.ody = dy;
  load();
},
move4 = function (dx, dy) {
  val4T = begin4 - this.ody;
  this.ody = dy;
  load();
},
move5 = function (dx, dy) {
  val5T = begin5 - this.ody;
  this.ody = dy;
  load();
},
up1 = function(){
    if( val1T < 0 ) 
{
    val1T = 0;
}
else if( val1T > 600 )
{
val1T = 600;
}
    begin1 = val1T;
    document.getElementById('attra').value = Math.floor(val1T/6);
    load();
},
up2 = function(){
        if( val2T < 0 ) 
{
    val2T = 0;
}
else if( val2T > 600 )
{
    val2T = 600;
}
    begin2 = val2T;
    document.getElementById('attrb').value = Math.floor(val2T/6);
    load();
},
up3 = function(){
        if( val3T < 0 ) 
{
    val3T = 0;
}
else if( val3T > 600 )
{
    val3T = 600;
}
    begin3 = val3T;
    document.getElementById('attrc').value = Math.floor(val3T/6);
    load();
},
up4 = function(){
        if( val4T < 0 ) 
{
    val4T = 0;
}
else if( val4T > 600 )
{
    val4T = 600;
}
    begin4 = val4T;
    document.getElementById('attrd').value = Math.floor(val4T/6);
    load();
},
up5 = function(){
        if( val5T < 0 ) 
{
    val5T = 0;
}
else if( val5T > 600 )
{
    val5T = 600;
}
    begin5 = val5T;
    document.getElementById('attre').value = Math.floor(val5T/6);
    load();
}
    bar1.drag( move1, start, up1);
    bar2.drag( move2, start, up2);
    bar3.drag( move3, start, up3);
    bar4.drag( move4, start, up4);
    bar5.drag( move5, start, up5);
};
load();
</script>

<%= form_for(@ballot) do |f| %>

<%= f.hidden_field :user_id, value: current_user.id %>
<%= f.hidden_field :target_id, value: @user2.id %>

<%= f.text_field :attr_A, id: "attra" %>

<%= f.text_field :attr_B, id: "attrb" %>

<%= f.text_field :attr_C, id: "attrc" %>

<%= f.text_field :attr_D, id: "attrd" %>

<%= f.text_field :attr_E, id: "attre" %>

<% end %>

<%= link_to "Thy judgment be cast upon the unworthy", vote_path( target_user: @user2, attrA: 20, attrB: 20, attrC: 20, attrD: 20, attrE: 20, ballot: @ballot ), method: "post" %>

</div>

我想我应该补充说这是我的第一个rails应用程序。这是我第一次完成应用程序需要做的最后一件事。

Answer 1

这是一段非常冗长的代码。我做了一些与你的要求非常相似的事情。我建议 JSON gem和json.js 将数据从GUI传递到rails。

创建一个javascript类，它在浏览器端保存数据。要将数据传递给rails，您可以使用 JSON.stringify（object）并在ajax调用中传递它。并在ruby端使用 JSON.parse 以hashmap的形式获取数据。

将数据从ruby传递给javascript时，请确保创建在javascript端创建的类的对象，并手动将值加载到该对象中。

我不喜欢gon gem。

访问rails中的js变量/值，反之亦然

1 个答案: