通过erb进行highcharts的模板构造器

Question

我试图使用Sinatra写json来渲染高图蜘蛛图。看起来很简单，但我尝试的所有内容都出错了。

我目前收到此错误：

  

未捕获的TypeError：undefined不是函数58：11（匿名   function）jquery.min.js：2 m.Callbacks.jjquery.min.js：2   m.Callbacks.k.fireWithjquery.min.js：2 m.extend.readyjquery.min.js：2 J

但是，当我复制并粘贴Sinatra生成的javascript时，它可以正常工作：jsfiddle

这是我的sinatra代码（最相关的部分）：

  get '/tasting/:id' do
      id = params[:id]
      result = {}
      tasting = Tasting.find(id)
      components = ['nose', 'berry', 'citrus', 'stonefruit', 'grassy', 'floral',
        'spicy', 'mineral', 'sweet', 'sour', 'woody', 'tannic',
        'body', 'balance', 'finish']

      chart = {}
      chart['polar'] = true
      chart['type'] = 'line'
      result['chart'] = chart

      xaxis = {}
      xaxis['categories'] = components
      xaxis['tickmarkPlacement'] = 'on'
      xaxis['lineWidth'] = 0

      yaxis = {}
      yaxis['gridLineInterpolation'] = 'polygon'
      yaxis['lineWidth'] = 0
      yaxis['min'] = 0


      legend = {}
      legend['align'] = 'right'
      legend['verticalAlign'] = 'top'
      legend['y'] = 70
      legend['layout'] = 'vertical'

      series = []
      s1 = {}
      s1['pointPlacement'] = 'on'
      s1['name'] = 'tasting'
      data = []
      for c in components
        data.push(tasting[c])
      end

      s1['data'] = data
      series.push(s1)

      result['xAxis'] = xaxis
      result['yAxis'] = yaxis
      result['legend'] = legend
      result['series'] = series

      @json = result.to_json
      erb :'show_highchart'
    end

show_highchart.erb：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<script>
$(function() {
    console.log($('#container'));
    console.log(<%= @json %>);

    $('#container').highcharts(<%= @json %>);
});
</script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

渲染html：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<script>
$(function() {
    console.log($('#container'));
    console.log({"chart":{"polar":true,"type":"line"},"xAxis":{"categories":["nose","berry","citrus","stonefruit","grassy","floral","spicy","mineral","sweet","sour","woody","tannic","body","balance","finish"],"tickmarkPlacement":"on","lineWidth":0},"yAxis":{"gridLineInterpolation":"polygon","lineWidth":0,"min":0},"legend":{"align":"right","verticalAlign":"top","y":70,"layout":"vertical"},"series":[{"pointPlacement":"on","name":"tasting","data":[1,3,2,2,2,3,2,2,3,2,3,3,2,2,3]}]});

    $('#container').highcharts({"chart":{"polar":true,"type":"line"},"xAxis":{"categories":["nose","berry","citrus","stonefruit","grassy","floral","spicy","mineral","sweet","sour","woody","tannic","body","balance","finish"],"tickmarkPlacement":"on","lineWidth":0},"yAxis":{"gridLineInterpolation":"polygon","lineWidth":0,"min":0},"legend":{"align":"right","verticalAlign":"top","y":70,"layout":"vertical"},"series":[{"pointPlacement":"on","name":"tasting","data":[1,3,2,2,2,3,2,2,3,2,3,3,2,2,3]}]});
});
</script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

我错过了什么？谢谢！