动态数据使用Rails3中

问题描述：

我想实现3.Currently我只是使用默认的数据提供了轨道Highcharts瀑布图由http://www.highcharts.com/demo/以下是我测试用的动态数据使用Rails3中

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Highcharts Example</title> 
<script type="text/javascript"> 
$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'waterfall' 
    }, 

    title: { 
     text: 'Highcharts Waterfall' 
    }, 

    xAxis: { 
     type: 'category' 
    }, 

    yAxis: { 
     title: { 
      text: 'USD' 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     pointFormat: '<b>${point.y:,.2f}</b> USD' 
    }, 

    series: [{ 
     upColor: Highcharts.getOptions().colors[2], 
     color: Highcharts.getOptions().colors[3], 
     data: [{ 
      name: 'Start', 
      y: 120000 
     }, { 
      name: 'Product Revenue', 
      y: 569000 
     }, { 
      name: 'Service Revenue', 
      y: 231000 
     }, { 
      name: 'Positive Balance', 
      isIntermediateSum: true, 
      color: Highcharts.getOptions().colors[1] 
     }, { 
      name: 'Fixed Costs', 
      y: -342000 
     }, { 
      name: 'Variable Costs', 
      y: -233000 
     }, { 
      name: 'Balance', 
      isSum: true, 
      color: Highcharts.getOptions().colors[1] 
     }], 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return Highcharts.numberFormat(this.y/1000, 0, ',') + 'k'; 
      }, 
      style: { 
       color: '#FFFFFF', 
       fontWeight: 'bold', 
       textShadow: '0px 0px 3px black' 
      } 
     }, 
     pointPadding: 0 
    }] 
}); 
}); 

    </script> 
</head> 
<body> 


<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> 

</body>

视图文件

现在我要实现，首先是应该是动态的基本名所需的数据：和Y：值。值：该值可以使用JSON对象，但如何构建JSON，因为没有y为通过当值如在

name: 'Positive Balance', isIntermediateSum: true, color: Highcharts.getOptions().colors[1]

和

name: 'Balance', isSum: true, color: Highcharts.getOptions().colors[1]

情况不一致。请帮助我，因为我无法弄清楚如何在此图表中实现动态数据。

你的问题到底是什么？你需要建立一个API来提供完全按照你描述的格式提供的数据吗？ –

是的，你可以说..所需的格式将如上面的视图文件所示..基本上**数据：**对象。 –

答

以下是答案，如果它可以帮助任何人。这是动态数据的例子。 http://www.highcharts.com/demo/waterfall。在控制器文件

class GraphsController < ApplicationController 

def index 
defaults = [:name=>'Positive Balance', :isIntermediateSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for positive balance which would automatically be calculated once we pass the correct values in the json format 
defaults_final = [:name=>'Balance', :isSum=>'true', :color=>'Highcharts.getOptions().colors[1]'] #array for final balance 
positivegraph = Graph.all(:conditions =>'y > 0') # for the positive values 
negativegraph = Graph.all(:conditions =>'y < 0') # for the negative values 
positive_graph = positivegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of positive values 
negative_graph = negativegraph.collect{|graph| {:name=>graph.name, :y=>graph.y}} # form an array of negative values 
@user_hash_array = positive_graph.concat(defaults) #concat arrays successively 
@user_hash_array = @user_hash_array.concat(negative_graph) 
@user_hash_array = @user_hash_array.concat(defaults_final).to_json 
end 
end

在视图文件I有

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<%= javascript_include_tag :defaults %> 
<%= javascript_include_tag 'jquery.min' %> 
<%= javascript_include_tag 'highcharts' %> <!--[if IE]> <%= javascript_include_tag 'excanvas.compiled' %> <![endif]--> 
<%= javascript_include_tag 'highcharts-more' %> 
<%= javascript_include_tag 'exporting' %> 
<title>Highcharts Example</title> 
<script type="text/javascript"> 
$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'waterfall' 
    }, 

    title: { 
     text: 'Highcharts Waterfall' 
    }, 

    xAxis: { 
     type: 'category' 
    }, 

    yAxis: { 
     title: { 
      text: 'USD' 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     pointFormat: '<b>${point.y:,.2f}</b> USD' 
    }, 

    series: [{ 
     upColor: Highcharts.getOptions().colors[2], 
     color: Highcharts.getOptions().colors[3], 
     data: 
      <%= raw @user_hash_array %> 
      , 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return Highcharts.numberFormat(this.y/1000, 0, ',') + 'k'; 
      }, 
      style: { 
       color: '#FFFFFF', 
       fontWeight: 'bold', 
       textShadow: '0px 0px 3px black' 
      } 
     }, 
     pointPadding: 0 
    }] 
}); 
}); 

</script> 
</head> 
<body> 
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> 

</body> 
</html>

在数据库I有两个字段1是名称场和其它场是ý其具有整数值。

动态数据使用Rails3中

相关推荐