Question

我在网站上搜索了很多，但我找不到答案，所以我发布了我的问题。我认为我的问题很容易存在但是我第一次使用javascript，jquery和ajax并且我不知道该怎么做:(！我使用Laravel 5 我有一个刀片php页面，在这个文件中我有一段时间创建了许多＆lt; div＆gt; s喜欢这个chart.blade.php：

<?php $id=0; ?>
@foreach($results as $row)
...

<?php 
 $i++; 
 $allGrade = findData($row);
 echo "<div id=\"container$id\" style=\"...\"></div>";
?>
...
@endforeach

此文件使用id container1，container2，container3，...创建所有div。在某些情况下，创建100个div，在某些情况下为1200 div，并且它不是恒定的！

在这些div中我想使用条形图，我使用http://highcharts.com/。我的一个问题是做这项工作的最佳方式是什么？在这个刀片的顶部我使用这个java脚本函数highchart.js

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
    $ {
        demo.css
    }
</style>
<script type="text/javascript">
    $(function () {
        for (var i = 0; i < 5000; i++) {
          // Some Alert ****test here ****
            //I put some alert work correctly




            $('#container' + i).highcharts({
                chart: {
                    type: 'bar'
                }
                , title: {
                    text: 'Historic World Population by Region'
                }
                , subtitle: {
                    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
                }
                , xAxis: {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
                    , title: {
                        text: null
                    }
                }
                , yAxis: {
                    min: 0
                    , title: {
                        text: 'Population (millions)'
                        , align: 'high'
                    }
                    , labels: {
                        overflow: 'justify'
                    }
                }
                , tooltip: {
                    valueSuffix: ' millions'
                }
                , plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                }
                , legend: {
                    layout: 'vertical'
                    , align: 'right'
                    , verticalAlign: 'top'
                    , x: -40
                    , y: 80
                    , floating: true
                    , borderWidth: 1
                    , backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')
                    , shadow: true
                }
                , credits: {
                    enabled: false
                }
                , series: [{
                    name: 'Year 1800'
                    , data: [107, 31, 635, 203, 2]
    }, {
                    name: 'Year 1900'
                    , data: [133, 156, 947, 408, 6]
    }, {
                    name: 'Year 2012'
                    , data: [JSON.parse('<?php echo json_encode($allGrades[1]); ?>')]
    }]
            });
        }
    });
</script>
</head>

<body>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container1"></div> 
. 
.
.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</body>

</html>

allGrade [1]的值是20，当我在 警报测试 部分中使用此警报测试时，如下所示

   var d = <?php echo json_encode($allGrades); ?>; //Don't forget the extra semicolon!
        //alert(d[1]);

  j++;
  var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
  var c1 = newJ[1];
  var c2 =newJ[2];
  alert(c1);
  alert(JSON.parse('<?php echo json_encode($allGrades[1]); ?>'));

警报工作并在警报框中显示数据20！

我期待2012年的数据，当我把c1或者放入JSON.parse（＆＃39;＆＃39;）时，图表数据为20，但是当我把这两个项目放在一起工作时！

Answer 1

将数据属性更改为

  var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
then 

data: newJ[i]

laravel 5 - 将php变量传递给jquery或ajax或javascript

1 个答案: