javascript - 使用 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

我在 View 中使用 Haml 的 javascript 过滤器:

:javascript
  #{@chart.chart_js}

到目前为止一切顺利。丑陋的部分是 chart_js 方法。我只是简单地复制了 HighChart javascript 的全文，将其作为字符串粘贴，然后使用 Ruby 插值从 Controller 中创建的 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 创建一个 View ，然后使用实例变量(例如 @render_to、@chart_type 等)。这不会真正清理代码那么多，但它会消除 Controller 中具有巨大 View 字符串的一些“错误”。

从根本上说，您无能为力；您有一堆服务器端信息，必须将其写入客户端(以特定的 Highcharts 格式)。这是无法回避的。

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

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

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

希望对您有所帮助。