0
所以我的問題是，我需要找到一種方法來使下面的代碼創建的圖形保存到我在rails中創建的投票中。該選票使用最後幾行代碼中顯示的手動值，但我需要從圖表中提取值並提交，還需要找出一種方法將選票中的值加載回圖表中。在rails中訪問js變量/值
到目前爲止我試過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應用程序。這是我需要爲我的第一個應用完成的最後一件事情之一。