Я следую главе 223 (диаграммы) Railscasts и пытался реализовать стиль "пончик" для приложения, используя библиотеку Highcharts .
Теперь я знаю, что это всего лишь один «круговой» ряд внутри другого, и каждый из них имеет свой собственный источник данных.
Хотя, пытаясь настроить примеры так, как мне хотелось, я просто не мог получить желаемый результат. Мне было интересно, как правильно передавать данные в параметр «данные» диаграммы?.
Итак, я скопировал из интернета следующий код (только для тестирования):
series: [
{
type: 'pie',
name: '2008',
size: '45%',
innerSize: '20%',
data: [
{ name: 'Firefox', y: 45.0, color: '#4572A7' },
{ name: 'IE', y: 26.8, color: '#AA4643' },
{ name: 'Chrome', y: 12.8, color: '#89A54E' },
{ name: 'Safari', y: 8.5, color: '#80699B' },
{ name: 'Opera', y: 6.2, color: '#3D96AE' },
{ name: 'Mozilla', y: 0.2, color: '#DB843D' }
]
}
]
Другой способ передачи данных:
series: [
{
type: 'pie',
name: '2008',
size: '45%',
innerSize: '20%',
data: [
['IE', 46.6],
['Chrome', 3.1],
['Safari', 2.7],
['Opera', 2.3],
['Mozilla', 0.4]
]
}]
Как видите, данные, которые я использую, являются статическими. Что, если я хочу использовать информацию из моей базы данных? .
Итак, так как у меня есть пара моделей:
class Frame < ActiveRecord::Base class FrString < ActiveRecord::Base
attr_accessible :name, :total attr_accessible :frame_id,:name,:total
has_many :fr_strings belongs_to :frame
end end
Хотя создание массива массивов для последующего использования его в качестве источника данных для моих диаграмм было бы хорошей идеей ... очевидно, не очень хорошим.
<% _data=[] %>
<%Frame.all.each do |frame|%>
<% _data << [frame.name,frame.fr_strings.sum(:total)]%>
<%end%>
Пирог не готовится. Так что я был бы признателен за любую помощь в этом вопросе
Редактировать (вывод Javascript)
Когда я передаю параметр «data» как:
data: [
<%_data.each do |d|%>
<%=d%>,
<%end%>
]
Это дает мне:
<!DOCTYPE html>
<html>
<head>
<title>Charts</title>
<link href="/stylesheets/application.css?1305016385" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/application.js?1304963001" type="text/javascript"> </script>
<script src="/javascripts/jquery-1.4.2.min.js?1305020819" type="text/javascript"></script>
<script src="/javascripts/rails.js?1305020831" type="text/javascript"></script>
<script src="/javascripts/highcharts.js?1305029094" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="G4k7DrZNfIcJt4Dlbz7JzNViSjQ+OGPUAVY4rW+XAxY="/>
</head>
<body>
<script type="text/javascript" charset='utf-8'>
$(function(){
new Highcharts.Chart({
chart: {
renderTo: 'frames_chart',
margin: [50, 0, 0, 0],
plotBackgroundColor: 'none',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'CHART TITLE'
},
subtitle: {
text: 'Inner circle: 2008, outer circle: 2010'
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.name +': '+ this.y +' %';
}
},
series: [
{
type: 'pie',
name: '2008',
size: '60%',
innerSize: '10%',
data: [
["Car", 93.0]
["House", 91.0]
],
dataLabels: {
enabled: false
}
},
]
});
});
</script>
<div id="frames_chart" style="width:560px; height:300px"></div>
</body>
</html>
Может ли этот синтаксис "" **** "" быть причиной того, что все тут запуталось? Я перепроверил массив _data и вот как он заполняется. Может проблема в том, как я получаю данные?