0

Опишу проблему. Хочу подключить яваскрипт-график для отображения информации. Сама вьюха:

      <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
      <h2> Топливная статистика байка <%= @bike.name %>, владелец <%= @bike.user_name %> </h2>
      <% get_stata_l_na_100_km %>  //*получаю значение json из хелпера

      <div id='chartDivRashod'>
        <%= javascript_include_tag "fuel_chart" %>  //*подгружаю JS-график из файла
      </div>

в хелпере полчаю переменную @json_stata_l_na_100_km в json-формате, сам хелпер:

      module StataFuelsHelper
      def get_stata_l_na_100_km
        @stata_graph = []
        @view_stata_fuel.each do |stata|
          @stata_graph << (stata.refueling / (stata.odo_delta / 100)).round(2).to_f
        end
     @json_stata_l_na_100_km = @stata_graph.to_json
      end
      end

и сам подгружаемый яваскрипт-файл fuel_chart.js с графиком ZingChart:

var chartRashod = {
  type: "bar",  // Specify your chart type here.
  "plot": {
    "value-box": {
      "text": "%node-value"
    }
  },
  title: {
    text: "средний расход, л/100 км" // Adds a title to your chart
  },
  legend: {
    "header": {
      "text": "байк"
    }

  }, // Creates an interactive legend
    "type": "bar",
    "scale-x": {
    "zooming": true
    },
    "scale-y": {
    "zooming": false
  },
  "preview": {
    "visible": true
  },

  series: [  
      { text: "1",
        values: <%= JSON.parse(@json_stata_l_na_100_km) %> }
  ]
};

zingchart.render({ // Render Method[3]
  id: "chartDivRashod",
  data: chartRashod,
  height: 400,
  width: 600
});

При запуске консоль выдает ошибку скрипта SyntaxError: expected expression, got '<' values: <%= JSON.parse(@json_stata_l_na_100_km) %> }. Если убрать обертку <%= %> то выдает ошибку SyntaxError: illegal character, т е строку не воспринимает. А вот если не выношу яваскрипт-код в отдельный файл и пишу его во вьюхе, завернув в script ... /script - то график отрабатывает на ура без проблем.

Как решить проблему, что я делаю не так? Заранее спасибо.

2
  • fuel_chart.js где находится в проекте?
    – user181100
    Commented 28 окт. 2016 в 9:31
  • @D-side, тут /app/assets/javascripts/fuel_chart.js
    – Yar-ua
    Commented 29 окт. 2016 в 9:54

1 ответ 1

1

О-ой... неправильно вы сделали приблизительно всё.

Ассеты компилируются перед запуском в production и они общие для всех. Класть туда какие-либо данные, которые могут быть разными на разных страницах или могут измениться после запуска сервера, бессмысленно. Хотите меняющиеся данные — делайте вьюху. А лучше — отдельно код, а отдельно источник данных в JSON, к которому этот код будет обращаться.

ERB в ассетах обрабатывается только если в конце имени файла .erb, например fuel_chart.js.erb.

<%= JSON.parse(@json_stata_l_na_100_km) %> не выдаст вам валидный JSON. Это разбирает строку в структуры данных Ruby. Если у вас уже есть означенная структура данных, вам её надо не парить, а наоборот, дампить (JSON.dump).

3
  • а что надо записать чтобы получить из JSON массив, который сможет "проглотить" скрипт? Если вместо строки <%= JSON.parse(@json_stata_l_na_100_km) %> записать в скрипт просто числовой массив ( например [10, 20, 35, 40] ) - то скрипт подхватывает значение и график отрисовывается. Если весь скрипт не формировать в отдельный файл а засунуть во вьюху - все работает и строка <%= JSON.parse(@json_stata_l_na_100_km) %> парсится нормально. Я не пойму почему в отдельном файле скрипта это не работает..(
    – Yar-ua
    Commented 30 окт. 2016 в 17:44
  • @Yar-ua это не отменяет того факта, что вывод просто Ruby'шных значений не гарантирует вам JSON. А JSON.dump гарантирует.
    – user181100
    Commented 30 окт. 2016 в 17:47
  • Проблема решена выносом яваскрипт-графика во вьюху _graph_fuel_js.html.erb. Во вьюхе json-переменная спарсилась без ошибок <%= JSON.parse(@json_stata_l_na_100_km) %>. Из общей вьюхи вызываю рендером с передачей переменной <%= render 'fuel_chart', locals: @json_stata_l_na_100_km %>
    – Yar-ua
    Commented 3 нояб. 2016 в 22:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.