Rails + charts.js: Cách điền vào mảng Javascript với giá trị từ cơ sở dữ liệu?

Tôi muốn sử dụng biểu đồ trực quan hóa của Google để hiển thị thông tin vào biểu đồ.Rails + charts.js: Cách điền vào mảng Javascript với giá trị từ cơ sở dữ liệu?

Chức năng javascript để thiết lập giá trị vào biểu đồ trông như thế này:

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] 
     ] 
    }; 

    ... 
}

Vấn đề của tôi là, mà tôi không biết làm thế nào để điền vào mảng như thế này với giá trị từ cơ sở dữ liệu - bất kỳ tip?

Cảm ơn rất nhiều

Nguồn

2013-09-16 user984621

Bạn sẽ cần nhúng javascript vào erb. Nếu bạn đặt tên cho tệp là chart.js.erb, khi đó bạn sẽ có thể truy cập vào Model logic từ javascript đến erb. Nhược điểm của phương pháp này là javascript sẽ phải được biên dịch trên mỗi lần xem trang, thay vì sau đó là một tài sản được biên dịch tĩnh. Điều này có thể làm chậm thời gian tải trang và một tuyến đường thay thế sẽ được tìm kiếm nếu đây sẽ là một trang được quản lý nhiều.

Ví dụ

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']) %> 
    ] 
    }; 

    ... 
}

Ngoài ra, bạn có thể tạo một yêu cầu AJAX thao tác trên mảng trên tải trang thông qua một bộ điều khiển API. Phương pháp này sẽ cho phép nội dung được biên dịch tĩnh, nhưng phức tạp hơn một chút.

Nguồn

2013-09-16 15:41:33 Eugene

Đây là những gì tôi đã làm trong dự án của tôi cách đây 4 tháng. Chú ý rất chặt chẽ đến mã. Nếu bạn đang sử dụng ruby trên đường ray, bạn có thể lấy dữ liệu từ bộ điều khiển bằng cách gõ <% = @get_data_from_controller_here này%>

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

Nguồn

2013-09-16 22:47:36 jimagic

Bạn có thể sử dụng thuộc tính 'dữ liệu':

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

Nguồn

2013-12-16 18:58:56 ryaz

Rails + charts.js: Cách điền vào mảng Javascript với giá trị từ cơ sở dữ liệu?

Trả lời

Các vấn đề liên quan