Можно объединить 2 бара в гистограмму (chart.js)

Question

Можно объединить 2 бара в гистограмму (chart.js)

1

В настоящее время у меня есть гистограмма с двумя результатами, сравнивающими друг с другом с использованием chart.js на Rails 5. Как показано на первом рисунке.

Он показывает текущий балл на левом баре и полный балл на правом баре.

Но у меня появилась просьба о том, чтобы на гистограммах были объединены и показаны легенды для текущего счета и полного балла.

Был поиск вокруг, но он просто нашел штабелированную гистограмму. Можно ли объединить 2 бара вместе?

Yewness 03 июль 2017, в 18:41

Источник

0

chartjs.org/samples/latest/charts/bar/stacked.html
fanta 03 июль 2017, в 16:03
0

Благодарю. Знаете ли вы, как я могу изменить код для набора данных, чтобы он мог складываться с легендами справа? Кажется, что его можно сгруппировать, используя {stack: 1} в наборе данных. Я могу поставить на код, если вам нужно больше информации.
Yewness 04 июль 2017, в 03:58

Теги:

javascript

ruby-on-rails

ruby

chart.js

charts

1 ответ

Ещё вопросы

Благодарю. Знаете ли вы, как я могу изменить код для набора данных, чтобы он мог складываться с легендами справа? Кажется, что его можно сгруппировать, используя {stack: 1} в наборе данных. Я могу поставить на код, если вам нужно больше информации.

Yewness · Accepted Answer · 2017-11-07T14-08-00.000Z

Я нашел решение. Для Chart.js 2.1.x и далее (он не работает Chart.js 1.xx), вы можете применить набор данных с настраиваемой опцией, как показано ниже:

var options = {
  scales:{
    xAxes: [{ stacked: true }],
    yAxes: [{ stacked: true }]
  }
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

Я использую диаграмму js 2.2.1 gem из этого источника. Вспомогательный метод из строки 3-35 дает представление о том, как создать сложную гистограмму. Так или иначе, у него нет возможности вводить данные из данного метода. Поэтому переопределите вспомогательный метод:

  def chart2_bar id=nil, size=nil, data={}, options={}
    html = "<canvas id=\"myChart_bar\" width=\"#{size[:width]}px\" height=\"#{size[:height]}px\"></canvas>".html_safe
    script = javascript_tag do
      <<-END.html_safe
      var ctx = document.getElementById("myChart_bar");
      var data = "#{data.to_json}";
      var options = "#{options.to_json}";
      var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
      END
    end
    return html + script
  end

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

Не сказал бы, что это идеальное решение, но оно отлично работает от генерации html, а также pdf (с использованием wicked-pdf).