Question

我使用highcharts生成条形图，下面是视图中的代码，它生成有关OS版本列表的数据（x轴[ubuntu12.04，red hat 6.5]和y轴[10， 20]）我的要求是在x轴上为每个值添加一个link_to，点击后我需要将它们重定向到不同的页面，该页面将显示与他们点击的操作系统版本相关的值列表。

<% 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>

Answer 1

您可以使用custom-events插件，该插件允许为标签添加事件。

Rails HighCharts添加link_to

1 个答案: