2

と を使用lazy_high_chartsしてfoundation 4います。

私の見解では<%= high_chart("my_id", @chart) %>、次のものを生成します。

<section>
  <script type="text/javascript">
    (function() {
      var onload = window.onload;                      # I think
      window.onload = function(){                      # the issue
        if (typeof onload == "function") onload();     # is here
          var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": {  } },"xAxis": {  },"yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };

    window.chart_my_id = new Highcharts.Chart(options);

      };
    })()
  </script>
<div id="my_id"></div>
</section>

ただし、foundation 4私ので生成された次の行のために表示されていませんapplication.js

$(document).foundation();
$(function(){ $(document).foundation(); });

これらの行を削除すると、チャートが読み込まれます。

foundationと をlazy_high_charts一緒に使用するにはどうすればよいですか?

4

2 に答える 2

1

それ以外の

(function() {
var onload = window.onload;                      # I think
window.onload = function(){                      # the issue

書きます

$(function(){

結果のスクリプト タグは次のようになります。

<section>
  <script type="text/javascript">
        $(function() {
          var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": {  } },"xAxis": {  },"yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] };

    window.chart_my_id = new Highcharts.Chart(options);

    });
  </script>
<div id="my_id"></div>
</section>

その前にjqueryスクリプトを置いていることを確認してください。

于 2013-08-25T14:34:46.407 に答える
1

zurb-foundationとlazy_high_chartsgemsを更新する問題を解決しました：

私のGemfileで：

gem 'zurb-foundation', '~> 4.0.0'
gem 'lazy_high_charts'

それで：

bundle install
bundle update lazy_high_charts
rails g foundation:install

に次の行も含めましたapplication.html.erb。

  ...
  <%= javascript_include_tag "vendor/custom.modernizr" %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  ...

その後、<%= high_chart("my_id", @chart) %>コードは次の JavaScript を生成します。

<script type="text/javascript">        
(function() {
  var f = function(){
  document.removeEventListener('page:load', f, true);
...

同じ問題に直面している人々に役立つことを願っています。

于 2013-08-28T09:00:20.477 に答える