Вызов метода контроллера при щелчке стека в гистограмме с накоплением (HighCharts)

Я новичок в рельсах. Я пытаюсь визуализировать столбчатую диаграмму с кликабельностью, используя высокие графики Желаемый результат - визуализация зависимой визуализации (облако слов на основе JQ Cloud), когда пользователь щелкает стек на диаграмме. При щелчке по стеку должен вызываться метод в контроллере, который выполняет запрос к базе данных и передает информацию в представление для визуализации облака слов.

Мне удалось отобразить гистограмму с накоплением, а также я могу добавить поведение при нажатии (открыть страницу вики и т. Д.). Однако я не могу вызвать метод в моем контроллере и, следовательно, не могу визуализировать зависимое облако слов.

Я использую драгоценный камень Lazy_High_Chart для HighCharts. Я предоставляю соответствующие фрагменты кода ниже. С этим кодом я получаю ошибку "sentiChart undefined" на консоли JS.

Я исследовал этот форум, и люди говорят об использовании ajax и добавлении маршрутов для вызова нужного метода. Я пытаюсь, но не могу реализовать это в моем коде. Пожалуйста помоги.

Я использую рельсы 5.1.4.

sentiscores_controller.rb
    #code initializing horizontal  stacked bar chart
    @chart = LazyHighCharts::HighChart.new('graph') do |f|
          f.chart(defaultSeriesType: "bar", borderColor: '#EBBA95', borderWidth: 2, height: 150, spacing: [0,0,0,0])
          f.title(text: "Customer Sentiment Score")
          f.xAxis(categories: "null", reversed: false, labels: {step:1}, visible: false)
          f.xAxis(categories: "null",opposite:true, reversed:false, linkedTo:0,labels:{step:1}, visible: false)
          f.yAxis(reversedStacks: true, visible: false, maxPadding: 0.00)
          f.plotOptions(series: {stacking: "normal", cursor: 'pointer'})
          f.series(name: '5', color:'#006203',  data: [count_senti_score[5]])
          f.series(name: '4', color: '#0f9200', data: [count_senti_score[4]])
          f.series(name: '3', color: '#30cb00', data: [count_senti_score[3]])
          f.series(name: '2', color: '#4ae54a',data: [count_senti_score[2]])
          f.series(name: '1', color: '#a4fba6', data: [count_senti_score[1]])
          f.series(name: '0', color: '#808080', data: [count_senti_score[0]])
          f.series(name: '-5', color: '#801717', data: [count_senti_score[-5].to_i.-@], legendIndex: 11)
          f.series(name: '-4', color: '#981d1d', data: [count_senti_score[-4].to_i.-@], legendIndex: 10)
          f.series(name: '-3', color: '#a01c1c', data: [count_senti_score[-3].to_i.-@], legendIndex: 9)
          f.series(name: '-2', color: '#bc2626', data: [count_senti_score[-2].to_i.-@], legendIndex: 8)
          f.series(name: '-1', color: '#e12f2f', data: [count_senti_score[-1].to_i.-@])
          f.legend(layout: "horizontal", reversed: "true", enabled: "true")
        end

    #method to call when a stack is clicked on the bar chart
    def render_phrase
      #pass variable to render word cloud
    end

routes.rb

 #nested routes for sentiscores route
    resources :sentiscores do
        get :render_phrase, on: :collection
      end

index.html.erb

#call ajax and call render_phrase method in sentiscores_controller
<script type="text/javascript">
  var sentiChart =  $("#senti_score_chart_container").highcharts();
  var callExecuter = function() {
    $.ajax({
      type: 'GET',
      url: '/sentiscores/render_phrase',
      data: {senti_score : sentiChart.plotOptions.series.name},
      success: //render word cloud
      }
    });
  };
  sentiChart.plotOptions.series.point.events.click=callExecuter
</script>

0 ответов

Другие вопросы по тегам