0

所以我的问题是我需要找到一种方法来制作由下面的代码创建的图表，以将值保存到我在 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 应用程序。这是我完成第一个应用程序需要做的最后一件事。

4

1 回答 1

0

那是一段很长的代码。我做了一些与您的要求非常相似的事情。我建议JSON gem 和 json.js从 GUI 到 rails 来回传输数据。

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

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

我不知道gon gem。

于 2012-12-30T09:16:57.273 回答