Rails + charts.js：如何用數據庫中的值填充Javascript數組？

我想用Google可視化圖表在圖表中顯示信息。Rails + charts.js：如何用數據庫中的值填充Javascript數組？

設定值到圖中的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] 
     ] 
    }; 

    ... 
}

我的問題是，我不知道怎麼填陣列像這樣從數據庫值 - 任何提示？

非常感謝

來源

2013-09-16 user984621

您需要在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']) %> 
    ] 
    }; 

    ... 
}

或者，可以創建通過API控制器填充在頁面加載陣列AJAX請求。這種方法可以讓資產靜態編譯，但有點複雜。

來源

2013-09-16 15:41:33 Eugene

這就是我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>

來源

2013-09-16 22:47:36 jimagic

您可以使用 '數據' 屬性：

# 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)} %>

來源

2013-12-16 18:58:56 ryaz

Rails + charts.js：如何用數據庫中的值填充Javascript數組？

回答

相關問題