Question

我想在用户点击按钮（id='dd'）

之后进行绘图

<%= image_tag("logo.png", size: "460x69", alt: "hallo", class: "logo") %>
<h1 class="main_title"><center>WOrld</center></h1>


<div >
  <p class="mod1_title">Modul</p>
  <div class="mod1_boxed">
    <strong>Energy (kWh):</strong> <a href="#"><img src="infoicon.png" class="info"></img></a>
      <%= form_tag( '/calculation/index', post: true ) do %>
      <%= text_field_tag "user_entry_module1", nil, placeholder: "Bsp. 3500", id: "user_entry" %></br>

      <strong>PV (kWp):</strong></br>
      <%= text_field_tag "user_entry_module2", nil, placeholder: "Bsp. 5", id: "user_entry_2" %></br>
      <%= submit_tag "Berechnen", id: "dd"%>

      <%end%>
  </div>  
</div>

<div id="container" style="min-width: 410px; max-width: 800px; height: 400px; margin-left: 150px; margin-top: 0px;"></div>




<%-# Reading data from the Front-End -%>
<%= javascript_tag do %>
  window.a = '<%= params[:user_entry_module1].to_i %>';
  window.b = '<%= params[:user_entry_module2].to_i %>';  
<% end %>



<script >

  $(function(){

    // Converting entries by user to integer
    var myInteger1; 
    myInteger1 = parseInt(a); 
    var myInteger2; 
    myInteger2 = parseInt(b);
    sum = myInteger1 + myInteger2; 
    console.log("Summe von entries:"+sum);




    // Calling my API with AJAX
    $('#dd').click(function(){

      $.ajax({ 
      type: 'POST', 
      url: '/api/v2/energycalcsb', 
      data: {"data":[myInteger1,myInteger2]}, 
      dataType: 'json', 
      success: function(data){ //Sending the output to a function
        send_to_front(data); 
        //console.log('success', data); //Help to print the output of the API
      }      

      });
       });

      // Function which receives the data from AJAX and the plot them with Highcharts    
      function send_to_front(data){ 
        var outputs = ['discharge_kWh', 'charge_kWh', 'purchase_kWh', 'feeding_kWh', 'own_consumption_kWh', 'own_production_kWh'];
        var eco4 = new Array;
        var eco6 = new Array;
        var eco8 = new Array;
        var eco10 = new Array;
        var eco12 = new Array;
        var eco14 = new Array;
        var eco16 = new Array;

        for (var i=0;i<=5;i++)
        {
          eco4[i] = data['data_output']['eco4'][outputs[i]];
          eco6[i] = data['data_output']['eco6'][outputs[i]];
          eco8[i] = data['data_output']['eco8'][outputs[i]];
          eco10[i] = data['data_output']['eco10'][outputs[i]];
          eco12[i] = data['data_output']['eco12'][outputs[i]];
          eco14[i] = data['data_output']['eco14'][outputs[i]];
          eco16[i] = data['data_output']['eco16'][outputs[i]];
        }


           $('#container').highcharts({
               chart: {
                   type: 'column'
               },
               title: {
                   text: 'Modul'
               },

               xAxis: {
                   categories: ['eco4', 'eco6', 'eco8', 'eco10', 'eco12', 'eco14', 'eco16'],
                   title: {
                       text: null
                   }
               },
               yAxis: {
                   min: 0,
                   title: {
                       text: 'kWh',
                       align: 'high'
                   },
                   labels: {
                       overflow: 'justify'
                   }
               },
               tooltip: {
                   valueSuffix: ' kWh'
               },
               plotOptions: {
                   bar: {
                       dataLabels: {
                           enabled: true
                       }
                   },

               //series: {
                 //pointPadding:0.02
                   //     }
               },

               legend: {
                   layout: 'vertical',
                   align: 'right',
                   verticalAlign: 'top',
                   x: -20,
                   y: 50,
                   floating: true,
                   borderWidth: 1,
                   backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                   shadow: true
               },
               credits: {
                  enabled: false
               },
               series: [{
                   name: 'discharge',
                   data: [eco4[0],eco6[0],eco8[0],eco10[0],eco12[0],eco14[0],eco16[0]]
               }, {
                   name: 'charge',
                   data: [eco4[1],eco6[1],eco8[1],eco10[1],eco12[1],eco14[1],eco16[1]]
               }, {
                   name: 'purchase',
                   data: [eco4[2],eco6[2],eco8[2],eco10[2],eco12[2],eco14[2],eco16[2]]
               },{
                   name: 'feeding',
                   data: [eco4[3],eco6[3],eco8[3],eco10[3],eco12[3],eco14[3],eco16[3]]
               },{
                   name: 'own_production',
                   data: [eco4[4],eco6[4],eco8[4],eco10[4],eco12[4],eco14[4],eco16[4]]
               },{
                   name: 'own_consumption',
                   data: [eco4[5],eco6[5],eco8[5],eco10[5],eco12[5],eco14[5],eco16[5]]
               },]
           }); // Plot Energy calculation module


      } //function send_to_front



  });


</script>

我尝试过click（）事件，但它不起作用。它没有绘制任何东西，当这个事件不存在时，我加载网页时就有了图表。知道发生了什么事吗？

Answer 1

我在调用我的图表（if）之前用#container解决了它。我不知道我可以在$(function(){....});

中混合使用JQuery和javascript

如何在单击Rails中的按钮后在JQuery中调用函数

1 个答案: