使用 Ruby/Sinatra 将数据传递给 Highcharts 的更好方法？

Question

我通常认为，如果它没有坏就不要修复它，但我目前对这个问题的解决方案（虽然它确实有效）看起来真的很难看。我正在使用 Ruby、Sinatra、Haml 和 Highcharts，我希望能够传递在 Ruby 中抓取的数据并发送到 Highcharts。

目前，我基本上只是从整个 Highcharts javascript 中创建一个字符串对象，并将 ruby​​ 数据插入其中。这可行，但我应该采取完全不同的方法吗？这正是我正在做的事情：

我定义了一个 HighChart 类，其中包含几个我希望能够通过 Ruby 更改的属性（例如图表标题、数据等）。下面的示例（有效！）只设置了其中两个属性，其余的保留为默认值：

    get '/' do
      @chart = HighChart.new(options={
                    :title_text => "Test Title",
                    :series_data => 
                    {
                    'Calvin' => [10, 2, 17],
                    'Hobbes' => [11, 14, 6]
                    }
                  }
                )
      haml :index
    end

我在视图中使用了 Haml 的 javascript 过滤器：

:javascript
  #{@chart.chart_js}

到目前为止一切顺利。丑陋的部分是 chart_js 方法。我只是简单地复制了 HighChart javascript 的全文，将其粘贴为字符串，然后使用 Ruby 插值从控制器中创建的 HighChart 对象中获取变量：

    def chart_js  
      chart_js = "
      var chart1;
      $(document).ready(function() {

  chart1 = new Highcharts.Chart({

     chart: {

        renderTo: '#{render_to}',

        type: '#{chart_type}'

     },

     title: {

        text: '#{title_text}'

     },

     xAxis: {

        categories: #{x_categories}

     },

     yAxis: {

        title: {

           text: '#{y_categories}'

        }

     },

     series: [#{get_data_js(series_data)}]

  });

 });
  "
end

为了方便起见，这里是 HighChart 对象类定义的第一部分：

    class HighChart
attr_accessor :render_to, :chart_type, :title_text, :x_categories, 
              :y_categories, :series_data

    def initialize(options={})
      self.render_to = options[:render_to] || 'container'
      self.chart_type = options[:chart_type] || 'bar'
      self.title_text = options[:title_text] || 'Fruit Consumption'
      self.x_categories = options[:x_categories] || ['Apples', 'Bananas', 'Oranges']
      self.y_categories = options[:y_categories] || 'Fruit eaten'
      self.series_data = options[:series_data] || {'Jane' => [1, 0, 4], 
                                                  'Bobbert' => [5, 7, 3],
                                                  'Zach' => [10, 2, 1]
                                                  }
    end

Answer 1

您可以专门为 Highcharts JS 创建一个视图，然后使用实例变量（例如，@render_to、@chart_type 等）。这不会真正清理代码那么多，但它会消除在控制器中拥有巨大的视图字符串的一些“错误”。

基本上，尽管您无能为力；您有一堆服务器端信息，必须将其写入客户端（以特定的 Highcharts 格式）。没有办法解决这个问题。

我能提供的唯一其他建议是使用中间 JS 变量。这将让您将所有 JS 保留在视图中（没有仅 JS 视图），然后您只需要设置一些 JS 变量。这看起来像这样：

var RENDER_TO = "@render_to";
var CHART_TYPE = "@chart_type";
// ...
$(document).ready(function() {
  chart1 = new Highcharts.Chart({
    chart: {
       renderTo: RENDER_TO,
       ....

现在这实际上涉及更多代码，但它可以让您将 onReady 代码与服务器值写入代码完全分开。

希望对您有所帮助。