Question

我尝试将2个数组中的手动输入替换为canvas.js以进行动态图表创建，并且在概念中希望使用PHP动态构建javascript。

如果我注释掉这一部分，代码实际上有效：

foreach($dataset as $x => $y){
echo "{label:\"$x\",y: $y},";
}

将为图形定义x，y-Datapairs。所以我有画布，但没有数据。

这里的代码就在前面：

echo "<script type=\"text/javascript\">
  window.onload = function () {
    var chart = new CanvasJS.Chart(\"canvasname\", {
      title:{
        text: \"Arbiträre Mengen ohne Zusammenhang über die Jahre\"              
      },
      data: [
        { 
         type: \"line\",
         dataPoints: [";

但解析后，源代码如下：

 data: [              
        { 
         type: "line",
         dataPoints: [<br />

<br />打破了我的Javascript，并且没有输出。

我要么在浏览器访问javascript位之前需要一种摆脱<br>的方法，或者需要知道这里出了什么问题。在我的本地Windows Apache安装和我的Linux远程Apache Web服务器上测试它。

以下是完整的参考代码：

$dataset = array(2010 => 240, 2011 => 73, 2012 => 12,2013 => 240,2014 => 30);

include "make_graph.php";
make_graph();

<?php
function make_graph()
{
echo "<script type=\"text/javascript\">
  window.onload = function () {
    var chart = new CanvasJS.Chart(\"dingdong\", {
      title:{
        text: \"Arbiträre Mengen ohne Zusammenhang über die Jahre\"              
      },
      data: [//array of dataSeries              
        { //dataSeries object
         type: \"line\",
         dataPoints: [";

foreach($dataset as $x => $y){
    echo "{label:\"$x\",y: $y},";
    }

echo "]        
      }
        ]
        });

    chart.render();
  }
  </script>
  <script type=\"text/javascript\" src=\"canvasjs.min.js\"></script>
  <div id=\"dingdong\" style=\"height: 300px; width: 400px;\">
  </div>";
}
?>

Answer 1

我真的不明白为什么不先建立它（当然遵循API的规则）。使用json_encode()。然后简单地连接json字符串（因为它是一个字符串）。请考虑以下示例：Sample Output

<?php

$dataset = array(2010 => 240, 2011 => 73, 2012 => 12, 2013 => 240 ,2014 => 30);
$new_dataset = array();
foreach($dataset as $key => $value) {
    $new_dataset[] = array('label' => $key, 'y' => $value);
}
$new_dataset = json_encode($new_dataset);

echo 
'
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var chart = new CanvasJS.Chart("dingdong", {
          title:{
            text: "Arbiträre Mengen ohne Zusammenhang über die Jahre"              
          },
          data: [              
              {
                  type: "line",
                  dataPoints: '.$new_dataset.'
              }
              ]
        });

        chart.render();
    }
</script>        
';

?>

<div id="dingdong"></div>

Answer 2

将数组格式化为所需的结构，然后使用json_encode。

<?php

$dataset = array( 2010 => 240, 2011 => 73, 2012 => 12, 2013 => 240, 2014 => 30 );

$dataset = array_map( function( $a, $b ) {
    return array( 'label' => $a, 'y' => $b );
}, array_keys($dataset), array_values($dataset) );

?>

<script type="text/javascript">

  window.onload = function () {
    var chart = new CanvasJS.Chart( "dingdong", {
      title:{
        text: "Arbiträre Mengen ohne Zusammenhang über die Jahre"              
      },
      data: [{
         type: "line",
         dataPoints: <?php echo json_encode($dataset); ?>   
      }]
    });
    chart.render();
  }

</script>

foreach-loop生成不需要的<br />"/> -tag，打破canvas.js的javascript

2 个答案: