2015-02-07 58 views
1

我是Laravel中的新成員,所以每當我嘗試將js函數添加到我的代碼時,我仍然遇到問題。 我需要爲我的laraval項目添加一個高圖。作爲開始,我剛剛複製了highcharts.com上的其中一個圖表的代碼並將其粘貼到主視圖中,但沒有顯示任何內容。 當我將相同的代碼添加到正常的html文件時,圖形顯示正常。Laravel 4項目中的Highcharts不會顯示

這裏是我的javascript代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(document).ready(function() { 
    Highcharts.setOptions({ 
     global: { 
     useUTC: false 
     } 
    }); 

     $('#container').highcharts({ 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
      events: { 
      load: function() { 
       // set up the updating of the chart each second 
       var series = this.series[0]; 
       setInterval(function() { 
       var x = (new Date()).getTime(), // current time 
        y = Math.random(); 
       series.addPoint([x, y], true, true); 
       }, 1000); 
      } 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150 
     }, 
     yAxis: { 
      title: { 
      text: 'Value' 
      }, 
      plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
       Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
       Highcharts.numberFormat(this.y, 2); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Random data', 
      data: (function() { 
      // generate an array of random data 
      var data = [], 
       time = (new Date()).getTime(), 
       i; 
      for (i = -19; i <= 0; i += 1) { 
       data.push({ 
        x: time + i * 1000, 
        y: Math.random() 
       }); 
      } 
      return data; 
      }()) 
     }] 
     }); 
     }); 
    }); 
</script> 

和HTML代碼

<div id="container" style="width:100%; height:400px;"></div> 

任何建議如何顯示圖形? 在此先感謝。

+0

你可以實現一個http://jsfiddle.net演示? – 2015-02-07 10:39:31

+0

是的,當然。這裏是http://jsfiddle.net/kxq7206g/ – 2015-02-07 10:51:13

+0

我的意思是我們如何複製這個問題。你的小提琴沒有問題! – 2015-02-07 10:54:46

回答

1

我認爲這個問題是您與創建圖表的語法:$('#container').highcharts...

看來highcharts功能沒有使用laravel定義。

還有另一種方法,你可以嘗試:

var chart = new Highcharts.Chart({ 
           chart: { 
            renderTo: 'container', 
            ... 
           }, 
           ... 
      }); 
+0

它的工作!非常感謝 – 2015-02-07 11:22:57