将chartjs的php sql值检索到jquery/ajax中

Posted 2023-05-08

【中文标题】将chartjs的php sql值检索到jquery/ajax中

【英文标题】：retrieve php sql values for chartjs into jquery/ajax

【发布时间】：2016-01-24 14:06:44

【问题描述】：

我试图在检索数据库值时使用http://www.chartjs.org/ 创建饼图。以下是我的代码

callactiveinactive.php

<?php
require connectDB.php;

$sql = "SELECT Player_Status from player
WHERE Player_Status = 'Active' ";
$res = $conn->query($sql);
$active = $res->num_rows;

$sql = "SELECT Player_Status from player
WHERE Player_Status = 'Suspended' ";
$res = $conn->query($sql);
$suspended = $res->num_rows;

echo json_encode(array($active,$suspended));
?>

主显示页面

 <canvas id="pieChart" style="height: 399px; width: 798px;" 
> ></canvas> 
><script> 
>$.ajax(       
>url:'callactiveinactive.php',
>      dataType: 'json'
> 
>      success:function(data)       
>var active = data["active"];        
>var suspended = data["suspended"];
>       );
> 
>     var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
>     var pieChart = new Chart(pieChartCanvas);
> 
> 
> 
>   
>     var PieData = [
>       
>         value: var active,
>         color: "#f56954",
>         highlight: "#f56954",
>         label: "Active"
>       ,
>       
>         value: var suspended,
>         color: "#00a65a",
>         highlight: "#00a65a",
>         label: "Suspended"
>       ,
> 
>     ];  pieChart.Doughnut(PieData, pieOptions); </script>

我知道我的 .ajax 搞砸了，请原谅我，因为我是新手。

【问题讨论】：

你的问题是什么？

我的问题是我无法让 ajax 将值提取到值中：

【参考方案1】：

value: var active,这行应该是value: active,

var PieData = [
>       
>         value: active,
>         color: "#f56954",
>         highlight: "#f56954",
>         label: "Active"
>       ,
>       
>         value: suspended,
>         color: "#00a65a",
>         highlight: "#00a65a",
>         label: "Suspended"
>       ,
> 
>     ];

编辑：

var active ;        
var suspended;
$.ajax(       
    url:'callactiveinactive.php',
    dataType: 'json', 
    success:function(data)       
        active = data["active"];        
        suspended = data["suspended"];
      
);

var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);

 //in case it till not work un-comment below line and check if it alert - number 
 //alert(typeof active);


var PieData = [
       
         value: active,
         color: "#f56954",
         highlight: "#f56954",
         label: "Active"
       ,
       
         value: suspended,
         color: "#00a65a",
         highlight: "#00a65a",
         label: "Suspended"
       ,

     ];  pieChart.Doughnut(PieData, pieOptions);

【讨论】：

我试过了，我也不行，但是当我输入值 1 或整数形式的 2 时，它可以工作。

对于饼图，您必须传入具有值和可选颜色属性的对象数组。 value 属性应该是一个数字，Chart.js 会将所有数字相加并计算每个数字的相对比例。 color 属性应该......它在文档中。

$active = $res->num_rows;那是我试图获取行数意味着“数字”，这里的活动和非活动是总行数