Как изменить значение переменной Javascript с помощью интерактивной ссылки в Ruby on Rails

Как изменить значение переменной Javascript с помощью интерактивной ссылки в Ruby on Rails

Я использую GeoChart из Google API чтобы представить список countries и их populations на цветной heat map . В настоящее время у меня есть настройка меню, в которой есть ссылка на таблицу данных о стране, карта мира с GeoChart , и у меня есть несколько пустых ссылок для континентов. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно изменить код региона, когда я нажимаю на одну из этих ссылок континента, чтобы GeoChart масштаб на правильном континенте, и я не могу понять, какой способ сделать это правильно , Мне нужен какой-то способ обновить карту и изменить значение переменной, определяющей, на какой регион карта смотрит, нажав ссылку или кнопку. API изменяет регион, изменяя значение региона переменной options в коде, который я имею в моем домашнем индексе.

Я попытался создать переменную экземпляра в контроллере, который имеет код региона по умолчанию, а затем с помощью link_to перенаправить обратно на тот же индекс и каким-то образом обновить значение переменной экземпляра, но я не уверен, если это вообще возможно.

home_controller.rb

 require 'json' require 'net/http' require 'pp' class HomeController {amp}lt; ApplicationController def index @region_code = 'world' url = 'http://localhost:3000/continents.json' uri = URI(url) response = Net::HTTP.get(uri) jsondata = JSON.parse(response) @countrydata = Array({"Country" ={amp}gt; "Population"}) for i in 0..(jsondata.length-1) do @countrydata.push([jsondata[i]["Country"], jsondata[i]["Population"]*1000]) end end end 

макеты / _menu.html.erb

 {amp}lt;div class="header"{amp}gt; {amp}lt;%=link_to image_tag("logo.jpg", :alt ={amp}gt;"World energy analysis", style:"height: 120px; width: 140px;"), "/"%{amp}gt; {amp}lt;h1{amp}gt;World Energy Analysis{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;br{amp}gt; | {amp}lt;%=link_to 'Global Data', continents_path %{amp}gt; | {amp}lt;%=link_to 'World Map', home_index_path%{amp}gt; | {amp}lt;%=link_to 'Africa', home_index_path(@region_code = '002') %{amp}gt; | North America | Europe | Latin America | Middle East | Australasia | {amp}lt;/p{amp}gt; 

главная / index.html.erb

 {amp}lt;p id="notice"{amp}gt;{amp}lt;%= notice %{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;head{amp}gt; {amp}lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; google.charts.load('current', { 'packages':['geochart'],'mapsApiKey': 'AIzaSyDIQFAz4aYXsAg6IMs6l2Fj6aiXv_3uT2M' }); google.charts.setOnLoadCallback(drawRegionsMap); var countrydata = JSON.parse('{amp}lt;%= @countrydata %{amp}gt;'.replace(/{amp}amp;quot;/g,'"')); function drawRegionsMap() { var data = google.visualization.arrayToDataTable(countrydata); var options = { region: '{amp}lt;%= @region_code %{amp}gt;' }; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="regions_div" style="width: 900px; height: 500px;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; 

Так как этот код покажет GeoChart на моей странице «Карта мира», но когда я нажму на ссылку «Африка», она не покажет ничего, что я ожидаю.

Буду признателен за любую помощь, я немного новичок в Ruby on Rails и мой опыт в основном связан с Java programming так что это немного другое. Я пытался найти много примеров и понять, что происходит. Вещи просто сбивают с толку.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector