Nano Hash - криптовалюты, майнинг, программирование

Отображение нескольких графиков на одной странице с использованием ленивых высоких диаграмм

В настоящее время я пишу приложение ruby ​​on rails и использую гем lazy high charts для отображения некоторых графиков. Однако у меня возникли проблемы с отображением двух графиков на одной странице. Похоже, что последний график переопределяет первый, поэтому отображается только второй график. Оба графика отображаются, если поставить их отдельно. Как показать оба графика на одной странице?

Вот что у меня на контроллере

@performance_chart = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => "Team Performance")
  f.xAxis(:categories => @x_axis)

  f.series(:name => @team.name, :yAxis => 0, :data => @performance)
  f.series(:name => "Top Scores for " + @team.division.name.capitalize[0...-1] + " Division", :yAxis => 0, :data => @top_scores)
  f.series(:name => "Averaged Scores for "+ @team.division.name.capitalize[0...-1] + " Division", :yAxis => 0, :data => @average_scores)
  f.yAxis [
    {:title => {:text => "Quiz Scores", :margin => 70} }
  ]
  f.chart({:defaultSeriesType=>"line"})
end 

#bar graph for individual team members 
@member_chart = LazyHighCharts::HighChart.new('column') do |f|
  f.title(:text => "Population vs GDP For 5 Big Countries [2009]")
  f.xAxis(:categories => ["United States", "Japan", "China", "Germany", "France"])
  f.series(:name => "GDP in Billions", :yAxis => 0, :data => [14119, 5068, 4985, 3339, 2656])
  f.series(:name => "Population in Millions", :yAxis => 1, :data => [310, 127, 1340, 81, 65])

  f.yAxis [
    {:title => {:text => "GDP in Billions", :margin => 70} },
    {:title => {:text => "Population in Millions"}, :opposite => true},
  ]

  f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
  f.chart({:defaultSeriesType=>"column"})
end

это то, что на мой взгляд

<div = class"row">
    <div class="card">
        <%= high_chart("some_id", @performance_chart) %>
    </div>
</div>  

<div class="row">
    <div class="card">
        <%= high_chart("some_id", @member_chart) %> 
    </div>
</div>

Ответы:


1

Я обнаружил, что HighChart.new() принимает три параметра, один из которых используется для создания тега div.

 def high_chart(placeholder, object, &block)
  object.html_options.merge!({:id => placeholder})
  object.options[:chart][:renderTo] = placeholder
  high_graph(placeholder, object, &block).concat(content_tag("div", "", object.html_options))
end

Так что все, что мне нужно было сделать, это изменить имя идентификатора одного из отображаемых графиков, который я вызывал из контроллера. Если нет, он находит тег div с тем же идентификатором (в моем случае это первый созданный мной график) и заменяет отображаемый ранее график. Чтобы решить проблему, я изменил

<%= high_chart("some_id", @member_chart) %> 

to

<%= high_chart("some_other_id", @member_chart) %>
08.06.2015
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..