0

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>

今私が達成したいのは、まず必要なデータが基本的に動的でなければならないということです。 name:とy:値。json オブジェクトを使用して値を渡すことができますが、次の場合のように値に一貫性がない場合に json を構築する方法

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

と

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

y:値がないためです。このグラフで動的データを取得する方法がわかりません。

4

1 に答える 1

0

それが誰かを助ける場合に備えて、ここに答えがあります。これは動的データの例です。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>

データベースには 2 つのフィールドがあります。1 つは名前フィールドで、もう 1 つのフィールドは整数値を持つyです。

于 2013-11-01T07:31:29.597 に答える