2014-01-28 37 views
0

我使用的是Highchart代碼的工作,我用我的組合框更新有問題,他們沒有在同一時間(Highchart圖形和ComboBox)Highchart不使用javascript

工作時我躲Highchart圖形我的組合框更新工作正常。

這裏是Highchart graphic on JsFiddle

下面是my tables on SqlFiddle

這是我的控制器:

def index 
     @countries= Country.find(:all) 
     @cities = City.find(:all,:condition=>['country_id =?',params[:country_id] ]) 
    end 

    def update_cties 
     @cities = City.find(:all,:conditions=>['country_id = ?',params[:country_id].to_i ]) 

     respond_to do |format| 
     format.js { 
      render :update do |page| 
       page.replace_html("cities", :partial=>"cities") 
      end 
     } 
    end 
end 

這是我的局部視圖:

Cities 
<%= select_tag "city_id",options_for_select(@cities.collect {|t| [t.name,t.id]} ,params[:city_id].to_i) %> 

這是我的觀點:「 index.html.erb「

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    </head> 
    <body> 
    <% form_tag :controller=>"project",:action=>"index" do %> 
     Select a country: 
     <%= select_tag "country_id", "<option value=\"\">Select</option>"+options_for_select(@countries.collect {|t| [t.name,t.id]},params[:country_id].to_i),:onchange=>remote_function(:url=>{:controller=>"project",:action=>"update_cities"},:with=>"'country_id=' + $('country_id').value") %> 
     <div id="cities"> 
      <%= render :partial=>"cities" %> 
     </div> 

     <%= submit_tag "Search", :name => nil %> 
    <% end %> 

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

    <script type="text/javascript"> 
    $(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Monthly Average Rainfall' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: { 
      categories: [ 
       'Jan', 
       'Feb', 
       'Mar', 
       'Apr', 
       'May', 
       'Jun', 
       'Jul', 
       'Aug', 
       'Sep', 
       'Oct', 
       'Nov', 
       'Dec' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Rainfall (mm)' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

     }, { 
      name: 'New York', 
      data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 

     }, { 
      name: 'London', 
      data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] 

     }, { 
      name: 'Berlin', 
      data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

     }] 
    }); 
}); 


請有人可以幫助我? 我真的很感激幫助

+0

你可以讓一個jsFiddle顯示這個? – wergeld

+0

Hello @ wegeld我正在使用這個http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/但當我的組合框更新(我的意思是組合框和higchart不同時工作)時不工作。 –

+0

好吧,我明白如果你隱藏了Highchart圖形你的組合框正在工作,但是當你的組合框活動時,你的組合框將不會更新你的城市。 –

回答

1

使用$ .noConflict();之前你像下面包括新的jquery插件,

//your old plugin here 

    <script type="text/javascript"> 
    $.noConflict(); 
    </script> 
+0

好吧,我試過你的代碼,現在我的組合框工作,但似乎Highchart圖形不工作。似乎需要別的東西 –