ruby-on-rails - 在 Ruby on rails 中加载 JSON 数据以使用 HIGHCHARTS

Question

我想在 RoR 4 中加载 JSON 数据，以使用 Highcharts 将数据图形化。我在 index.html.erb

{<h1 style="text-align:center" >HighCharts Test</h1>
<h1>Start</h1>
<div id="container" style="width:100%;height:400px;"></div>
<script>
   $(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});
</script>
<h1>End</h1>}

data.json 与 index.html.erb 位于同一文件夹中。

但是，当我运行代码时它没有绘制任何东西。我对 RoR 和 Highcharts 很陌生。错误是什么？谢谢。

Answer 1

您需要创建一个 Controller ，比如说 ChartsController。并在 charts_controller.rb 中写入以下方法

def data
  # this method is to send manually json data 
  #render json: {name: 'test',data: [2,0,9,23,2,123]}
  # or read data from a data.json file, use your custom path
  data = File.read("#{Rails.root}/app/views/charts/data.json")
  render json: data
end

并且，在您看来编写这段代码。

<script src="/assets/jquery.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<h1>Start</h1>
<div id="container" style="width:100%;height:400px;"></div>
<script>  

$(document).ready(function() {
    options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };
    $.getJSON('data.json', function(data) {
        options.series = data;
        new Highcharts.Chart(options);
    });

});

<h1>End</h1>

我已经尝试过了，它在我身边有效，希望它能成功。