Question

我正在尝试在rails 3中实现Highcharts Waterfall图。目前我只是使用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>

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

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

和

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

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

Answer 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是名称字段，另一个字段是 y ，其中包含整数值。

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

1 个答案: