[英]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.