Laravel 4 项目中的 Highcharts 不显示

Posted 2023-03-14

【中文标题】Laravel 4 项目中的 Highcharts 不显示

【英文标题】：Highcharts in Laravel 4 project are not displayed

【发布时间】：2015-04-07 11:42:47

【问题描述】：

我是 Laravel 的新手，所以每当我尝试将 js 函数添加到我的代码中时，我仍然会遇到问题。 我需要在我的 laravel 项目中添加一个 highchart。一开始，我只是复制了highcharts.com 上可用图表的代码并将其粘贴到主视图中，但没有显示任何内容。 当我将相同的代码添加到普通的html文件中时，图形显示正常。

这是我的 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>

关于如何显示图表有什么建议吗？ 提前致谢。

【问题讨论】：

你能实现一个jsfiddle.net 演示吗？

是的，当然。这里是jsfiddle.net/kxq7206g

我的意思是我们如何复制这个问题。你的小提琴没有问题！

我知道。正如我在问题中提到的，我在一个空白的 html 文件中实现了相同的代码，这很好。问题与laravel有关，这就是我要问的问题

我明白了，我的意思是你能实现一些东西来向我们展示实际的问题吗？不是工作的人

【参考方案1】：

我认为问题在于您创建图表的语法：$('#container').highcharts...

似乎highcharts 函数没有使用 laravel 定义。

您可以尝试另一种方法：

var chart = new Highcharts.Chart( 
                              chart:  
                                  renderTo: 'container', 
                                  ... 
                              ,
                              ...
            );