2015-09-05 22 views
0

我增加了Highcharts我project.I想填充從數據庫中值Javascript數組..傳遞PHP數組作爲Javascript數組值

{% extends '::base.html.twig' %} 

{% block stylesheets %} 
    {{ parent() }} 
{% endblock %} 

{% block body -%} 
<div class="page-header"> 
    Supporters 
</div> 
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div> 
{% endblock %} 

{% block javascripts %} 
{{ parent() }} 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script> 
    $(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'World\'s largest cities per 2014' 
      }, 
      subtitle: { 
       text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' 
      }, 
      xAxis: { 
       type: 'category', 
       labels: { 
        rotation: -45, 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Population (millions)' 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' 
      }, 
      series: [{ 
       name: 'Population', 

       /*data: [ 
        ['Shanghai', 23.7], 
        ['Lagos', 16.1], 
        ['Instanbul', 14.2], 
        ['Karachi', 14.0], 
        ['Mumbai', 12.5], 
        ['Moscow', 12.1], 
        ['São Paulo', 11.8], 
        ['Beijing', 11.7], 
        ['Guangzhou', 11.1], 
        ['Delhi', 11.1], 
        ['Shenzhen', 10.5], 
        ['Seoul', 10.4], 
        ['Jakarta', 10.0], 
        ['Kinshasa', 9.3], 
        ['Tianjin', 9.3], 
        ['Tokyo', 9.0], 
        ['Cairo', 8.9], 
        ['Dhaka', 8.9], 
        ['Mexico City', 8.9], 
        ['Lima', 8.9] 
       ],*/ 
       dataLabels: { 
        enabled: true, 
        rotation: -90, 
        color: '#FFFFFF', 
        align: 'right', 
        format: '{point.y:.1f}', // one decimal 
        y: 10, // 10 pixels down from the top 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }] 
     }); 
    }); 
</script> 
{% endblock %} 

我要替換數據庫從實際值的那些僞數據。我創建了一個將調用Doctrine並檢索記錄的方法。到目前爲止,我可以使用Symfony的轉儲工具成功檢索這些數據。

$em = $this->getDoctrine()->getManager(); 
    $province = $em->getRepository('DuterteBundle:Grps')->createQueryBuilder('g') 
     // ->join('p.region', 'r') 
     // ->where('r.id =:x') 
     // ->setParameter('x', 1) 
     ->orderBy('g.name', 'ASC') 
     ->getQuery() 
     ->getResult(); 

    // $dat = $this->container->get('duterte.twig.province_voters_extension'); 
    $datas = array();//initialise array 
     foreach ($province as $r) { 

      // $datas[] = array($r->getName(),(int)$dat->a($r->getId()),$r->getName()); 
      $datas[] = array($r->getName(),123); 
     } 

    $data = $datas; 
    echo '<pre>'; 
    \Doctrine\Common\Util\Debug::dump($data); 
    echo '</pre>'; 
    return $this->render('GraphBundle:Default:group.html.twig', array(
     'data' => $data 
    )); 

可變數據包含我想在Javascript數據variable.How填充來實現這一真實的數據?我試圖用這個

<script> 
    ... 
    data= <?php $data ?> 

    /*data: [ 
      ['Shanghai', 23.7], 
      ['Lagos', 16.1], 
      ['Instanbul', 14.2], 
      ['Karachi', 14.0], 
      ['Mumbai', 12.5], 
    */ 


</script> 

不嫩枝中的環境中工作

+0

您是否嘗試過使用「{{data}}」? – malcolm

+0

是的,我已經嘗試過,拋出一個錯誤「通知數組字符串轉換」 –

+0

我試過{{數據| json_encode()}},數據顯示在瀏覽器控制檯,但顯示錯誤「未捕獲的SyntaxError:意外的令牌&」 –

回答

1

嘗試{{ data|json_encode|raw }}。默認情況下,Twig將轉義HTML中的任何內容,但|raw過濾器會阻止該內容。

此外,如果你正在運行到一個問題,即json_encode調用創建一個JavaScript對象{},而不是一個數組[],只需撥打數據array_merge它傳遞給嫩枝前:

$data = array_merge($data); 

這將將數組重新鍵入以使用數字索引,並在使用json_encode時正確轉換爲JavaScript數組。

+0

{ {data | json_encode | raw}}真的在這裏工作 –