Question

Chart.js 和 PHP

2014-02-04

18856

javascript php chart.js

我正在使用 Chart.js 在我的网站上创建图表。数据需要来自数据库，因此 PHP 需要位于 javascript 内部。

这是我所拥有的：（因为只是测试，而不是数据库部分）

<?php
   $set1 = 20;
   $set2 = 30;
   $set3 = 40;
?>

然后创建饼图我有：

var pieData = [
  {
      value: <?php echo $set1; ?>,
      color:"#F38630"
  },
  {
      value : <?php echo $set2; ?>,
      color : "#E0E4CC"
  },
  {
      value : <?php echo $set3; ?>,
      color : "#69D2E7"
  }

];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

使用此代码我收到此错误：

Uncaught SyntaxError: Unexpected token < when it reached the first <?php call.

Answer 1

我猜你是在 .js 文件中执行此操作。我猜你的网络服务器没有解释 php 代码。相反，它将其作为静态 javascript 代码提供。

在 .php 文件中的 <script></script> 中执行此操作。

如果你不想将变量逐个传递给 javascript：将其作为 json 传递。

可以在此处找到示例：

在 PHP 和 Javascript 之间传输数组的最佳方法

Answer 2

创建颜色数组并将 $row 传递到 foreach 循环中，就像这样。

foreach($row as $key=>$value)
            {
                $data[$key]['value']=(int)$value['id'];
                $data[$key]['color'] = $color[$key];
            }

然后将数据转换为 json，就像这样

 var Data = <?php echo json_encode($dataArr['data']); ?>;

Answer 3

这很有帮助！

我刚刚将我的 HTML 文档更改为 PHP，然后它就起作用了！

我是代码开发方面的新手，但我对 MySQL cx 的提示是这样的。

查询：

<?php
session_start();
include_once "con.php"; #my conex in another doc

$query= "SELECT * FROM data ORDER BY id";
$result= mysql_query($query);

#For a simple first look, or rookies like me... I show the query result w/ an echo.  

while ($row= mysql_fetch_assoc($result)){
    echo $row['id'] . ' | ' . $row['mes'] . ' | ' . $row['valor1'] . ' % | ' . $row['valor2'] . ' % | ' . $row['valor3']. ' %' ."\n";


#This is what we need: I put data from my query in $setx, and then I use user3271851's code... it works!

    $set1= $row['valor1'];
    $set2= $row['valor2'];
    $set3= $row['valor3'];
}
?>

对于图表，就像帖子一样：

var pieData = [
  {
      value: <?php echo $set1; ?>,
      color:"#F38630"
  },
  {
      value : <?php echo $set2; ?>,
      color : "#E0E4CC"
  },
  {
      value : <?php echo $set3; ?>,
      color : "#69D2E7"
  }

];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

附注：抱歉，我的英语一点都不好。:)