使用 Rails3 在 Highcharts 瀑布中动态数据答案

【问题标题】：Dynamic data in Highcharts waterfall using Rails3使用 Rails3 在 Highcharts 瀑布中动态数据
【发布时间】：2013-10-29 07:24:50
【问题描述】：

我正在尝试在 rails 3 中实现 Highcharts 瀑布图。目前我只是使用http://www.highcharts.com/demo/ 提供的默认数据以下是我用于测试目的的视图文件

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

现在我想要实现的是首先所需的数据应该是动态的，基本上是 name: 和 y: 值。可以使用 json 对象传递值，但是当值不一致时如何构建 json，例如

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

和

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

因为没有 y: 值。请帮助我，因为我无法弄清楚如何在此图表中实现动态数据。

【问题讨论】：

您的问题到底是什么？您是否需要帮助构建 API 以提供与您描述的格式完全相同的数据？
是的，你可以这么说。所需的格式如上面的视图文件所示。基本上是 data: 对象。

标签： ruby-on-rails json ruby-on-rails-3 ruby-on-rails-3.1 highcharts

【解决方案1】：

这里是答案，以防万一它对任何人有帮助。这是动态数据的示例。 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

在我的视图文件中

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

在数据库中，我有两个字段，1 是 name 字段，另一个字段是 y，它具有整数值。

【讨论】：