[英]Rails HightCharts adding link_to
我正在使用highcharts生成条形图,下面是从视图中生成有关OS版本列表数据的代码(x轴[ubuntu12.04,red hat 6.5]和y轴[10,20])我的要求是在x轴上为每个值添加一个link_to,单击时我需要将它们重定向到其他页面,该页面应显示与他们单击的OS版本相关的值列表。
<% os_name = "" %>
<% data_value = "" %>
<% @linux_count.each do |linux| %>
<% if linux.os = 'linux' %>
<% os_name << "'#{linux.platform.humanize} #{linux.platform_version}', " %>
<% data_value << " #{linux.Total.to_i}," %>
<% end %>
<% end %>
<% @win_count.each do |win| %>
<% if win.os = 'windows' %>
<% os_name << "'#{win.kernel_name}', " %>
<% data_value << " #{win.Total.to_i}," %>
<% end %>
<div id="container04" style="width:550px; height:400px;"></div>
<script>
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container04',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 4,
beta: 4,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'OS by Platform/Version'
},
subtitle: {
text: 'Limited to Chef Data'
},
xAxis: {
categories: [ <%= raw os_name %> ]
},
yAxis: {
title: {
text: 'Instance Count'
}
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
name: [ 'Node Count by OS' ],
data: [ <%= raw data_value %> ]
}]
});
// Activate the sliders
$('#R0').on('change', function(){
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function(){
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
showValues();
});
</script>
您可以使用自定义事件插件,该插件可为标签添加事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.