我有一个POST表单,可以为Chartkick提供新的参数。它在相应的控制器方法运行时调用Chartkick.options
,但由于某种原因,重绘时不会遵循chartArea
选项。该图表比以前减少了65%。
奇怪的是,所有其他选项,如颜色/轴/图例都被遵守。当我调整窗口大小时,小图表会调整为全宽!我尝试将图表宽度设置为内嵌<%= area_chart @chart_data, width: "100%" %>
,但仍然会变小。
提交表单的Javascript
var formSubmit = function() {
$('.chart-radio-icon').change(function(){
$('#mega_form').submit();
});
};
$(document).ready(formSubmit);
在控制器中设置Chartkick.options
def set_default_options(chart_type)
default_options = {
colors: ['#d2080e', '#c464d0'],
library: {
chartArea: {
top: 45,
right: 40,
bottom: 40,
left: 80
},
animation: {
startup: true,
duration: 1500,
easing: 'out'
},
backgroundColor: '#2a2a2a',
fontName: 'Calibri',
curveType: 'function',
vAxis: {
gridlines:{
color: '#333333'
},
textStyle: {
color: '#a0a0a0'
}
},
hAxis: {
format: 'MMM d',
baselineColor: '#000000',
textStyle: {
color: '#a0a0a0'
}
},
axisTitlesPosition: 'none',
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#a0a0a0',
fontSize: 14,
bold: true
}
},
lineWidth: 3,
pointSize: 7,
crosshair: {
trigger: 'both',
opacity: 0.2
},
dataOpacity: 0.7,
tooltip: {
textStyle: {
color: '#2a2a2a'
}
}
}
}
case(chart_type)
when chart_type = "initial_chart"
Chartkick.options = default_options
when chart_type = "mega_chart"
Chartkick.options = default_options
else
end
end
end