logo标签列表

Rails + charts.js：如何从数据库中填充Javascript数组的值？

javascriptjqueryruby-on-railsrubycharts
5

我希望使用Google可视化图表来展示信息的图形化呈现。

用于将值设置到图表中的JavaScript函数如下：

function drawLineChart(chartType) {

    if(chartType == undefined) {
        chartType = 'data1';
    }

    var data = {
        data1: [
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
        ]
    };

    ...
}

我的问题是，我不知道如何使用数据库中的值来填充这样的数组 - 有什么提示吗？

非常感谢

3个回答
4
您需要将javascript嵌入到erb中。如果您将文件命名为chart.js.erb，则可以通过erb从javascript访问Model逻辑。该方法的缺点是javascript必须在每个页面视图上编译，而不是静态编译资产。这可能会减慢页面加载时间，如果这将是一个高流量的页面，则应寻找替代路线。
示例： chart.js.erb 
function drawLineChart(chartType) {

  if(chartType == undefined) {
    chartType = 'data1';
  }

  var data = {
    data1: [
      <%= Model.all.map { |m| [m.year, m.sales, m.expenses] }.unshift(['Year', 'Sales', 'Expenses']) %>
    ]
  };

  ...
}

或者，您可以创建一个AJAX请求，通过API控制器在页面加载时填充数组。 这种方法可以使资产静态编译，但比较复杂。

2
您可以使用"data"属性：
# statistics.js.coffee
jQuery ->
  data = {
    labels : $("#orders_chart").data('dates'),
    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : $("#orders_chart").data('orders')
    }
  ]
}

ordersChart = new Chart($("#orders_chart").get(0).getContext("2d")).Line(data)

#statistics/index.html.erb
<%= content_tag 'canvas', '', id: 'orders_chart', width: '1000', height: '600', data: {orders: (Order.week_ago.map &:total), dates: (Order.week_ago.map &:created_at)} %>
0

这是我4个月前在我的项目上所做的。非常注意代码。如果您正在使用Ruby on Rails，您可以通过键入此内容<%= @get_data_from_controller_here %>从控制器获取数据。

<html>
<head>
<title></title>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart1);
       google.setOnLoadCallback(drawChart2);
      function drawChart1() {
        var data = google.visualization.arrayToDataTable([

          ['Work',     <%= @get_data_from_controller_here1 %>],
          ['Eat',      <%= @get_data_from_controller_here2 %>],
          ['Commute',  <%= @get_data_from_controller_here3 %>],
          ['Watch TV', <%= @get_data_from_controller_here4 %>],
          ['Sleep',    <%= @get_data_from_controller_here5 %>]
        ]);

        var options = {
          title: 'My Daily Activities',
          chartArea:{left:5, top:20,width:"100%",height:"100%"},
          height: 500,
          width: 500,
          is3D: true
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d1'));
        chart.draw(data, options);
      }

       function drawChart2() {
        var data = google.visualization.arrayToDataTable([

          ['Work',     <%= @get_data_from_controller_here11 %>],
          ['Eat',      <%= @get_data_from_controller_here22 %>],
          ['Commute',  <%= @get_data_from_controller_here33 %>],
          ['Watch TV', <%= @get_data_from_controller_here44 %>],
          ['Sleep',    <%= @get_data_from_controller_here55 %>]
        ]);

        var options = {
          title: 'My Daily Activities',
          chartArea:{left:5, top:20, width:"100%",height:"100%"},
          height: 500,
          width: 500,
          is3D: true
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d2'));
        chart.draw(data, options);
      }
    </script>

</head>
<body>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

            $("#OpenDialog").click(function () {
                $('#dialog').css('overflow', 'hidden')
                $("#dialog").dialog({modal: true, 
                                    height: 450, 
                                    width: 850,
                                    resizable: true
                                    });
            });         
        });
    </script>

    <a id="OpenDialog" style="display:inline-block;" href="#" >Click here to open dialog</a>
    <div id="dialog" title="Dialog Title" style="display:none; overlay:hidden">
         <div id="piechart_3d1" style="width: 49%; height:49%; float:left;"></div>
         <div id="piechart_3d2" style="width: 49%; height:49%; float:right;"></div>
    </div>

</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接