如何使用php中的图表Js在MySQL中绘制带有数据的折线图

Question

我想使用 MySQL 表中的以下数据绘制折线图。

日期 - 12 月 10 日、12 月 11 日、12 月 12 日、12 月 13 日、12 月 14 日、12 月 15 日、12 月 16 日、12 月 17 日、12 月 18 日、12 月 19 日、12 月 20 日 出席人数 - 65、58、56、78、51、54、69、35、68、43、52

我做了两个查询来提取数据并使用下面的代码存储在两个数组中，即$data1 和$data2

$con = new mysqli($servername, $username, $password, $db);
$myquery1 = "select date from Table_attendance";
 $query1 = mysqli_query($con, $myquery1);
 
  if ( ! $query1 ) {
    echo mysqli_error();
    die;
  }
  
  for ($x = 0; $x < mysqli_num_rows($query1); $x++) {
  $data1[] = mysqli_fetch_assoc($query1);
}


 $my1 = "select attendance from Table_attendance";
 $qu1 = mysqli_query($con, $my1);
 
  if ( ! $qu1 ) {
    echo mysqli_error();
    die;
  }
  
  for ($x = 0; $x < mysqli_num_rows($qu1); $x++) {
  $data2[] = mysqli_fetch_assoc($qu1);
}

然后我使用以下代码将$data1 和$data2 两个数组编码为json 格式。

$encod = json_encode($data1);
$encod2 = json_encode($data2);

数组的输出如下。

[{"date":"2021-12-10"},{"date":"2021-12-11"},{"date":"2021-12-12"},{"date" :"2021-12-13"},{"日期":"2021-12-14"},{"日期":"2021-12-15"},{"日期":"2021-12-16" },{"日期":"2021-12-17"},{"日期":"2021-12-18"},{"日期":"2021-12-19"},{"日期":" 2021-12-20"}]

[{“出勤”：“65”}，{“出勤”：“58”}，{“出勤”：“56”}，{“出勤”：“78”}，{“出勤”：“ 51"},{"出勤":"54"}{"出勤":"69"},{"出勤":"35"},{"出勤":"68"},{"出勤":"43 "},{"出席":"52"}]

最后我尝试按如下方式传递编码值以绘制成折线图，但它不起作用。

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>

var xValues = <?php echo $encod?>;
var yValues = <?php echo $encod2?>;

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options: {
    title: {display: true, text: 'Custom Chart Title'},
    legend: {display: false},
    
                
                
                    
    scales: {
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

请帮助我进行此评估。如果有其他比我更好的代码，请善意分享。

Answer 1

您没有正确传递图表对象中的数据。可以用php或者js转换对象。

下面js中的例子。

const ctx = document.getElementById("myChart").getContext("2d");

const xValues = [
    { date: "2021-12-10" },
    { date: "2021-12-11" },
    { date: "2021-12-12" },
    { date: "2021-12-13" },
    { date: "2021-12-14" },
    { date: "2021-12-15" },
    { date: "2021-12-16" },
    { date: "2021-12-17" },
    { date: "2021-12-18" },
    { date: "2021-12-19" },
    { date: "2021-12-20" },
];
const yValues = [
    { attendance: "65" },
    { attendance: "58" },
    { attendance: "56" },
    { attendance: "78" },
    { attendance: "51" },
    { attendance: "54" },
    { attendance: "69" },
    { attendance: "35" },
    { attendance: "68" },
    { attendance: "43" },
    { attendance: "52" },
];

const x = xValues.map(item => item.date);

const y = yValues.map(item => item.attendance);

new Chart(ctx, {
    type: "line",
    data: {
        labels: x,
        datasets: [
            {
                label: "Dataset 1",
                backgroundColor: "rgba(0,0,255,1.0)",
                borderColor: "rgba(0,0,255,0.1)",
                data: y,
            },
        ],
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: "top",
            },
            title: {
                display: true,
                text: "Chart.js Line Chart",
            },
        },
    },
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

编辑 完整的php示例

<?php

$con = new mysqli($servername, $username, $password, $db);

$myquery1 = "select date from Table_attendance";
$result1 = mysqli_query($con, $myquery1);

$rowsDate = mysqli_fetch_all($result1, MYSQLI_ASSOC);

$xValues = array_map(function ($item) {
    return $item['date'];
}, $rowsDate);


$myquery2 = "select attendance from Table_attendance";
$result2 = mysqli_query($con, $myquery2);

$rowsAtd = mysqli_fetch_all($result2, MYSQLI_ASSOC);

$yValues = array_map(function ($item) {
    return $item['attendance'];
}, $rowsAtd);
?>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
    const x = <?php echo json_encode($xValues) ?>;
    const y = <?php echo json_encode($yValues) ?>;

    new Chart(ctx, {
        type: "line",
        data: {
            labels: x,
            datasets: [{
                label: "Dataset 1",
                backgroundColor: "rgba(0,0,255,1.0)",
                borderColor: "rgba(0,0,255,0.1)",
                data: y,
            }, ],
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: "top",
                },
                title: {
                    display: true,
                    text: "Chart.js Line Chart",
                },
            },
        },
    });
</script>

Answer 2

如答案中所述，问题出在编码中。实际上应该传递的数组应该是var xValues = [1,2,3,4,5,6] 格式。但我得到的是var xValues = [{1},{2},{3},{4},{5},{6}] 格式。无论如何，如果将来有人需要，我会发布我的整个代码。非常感谢那些试图帮助我的人。

完整代码如下

$con = new mysqli($servername, $username, $password, $db);
// getting date column from Table_attendance table 
$myquery1 = "select date from Table_attendance";
     $query1 = mysqli_query($con, $myquery1);
 
  if ( ! $query1 ) {
    echo mysqli_error();
    die;
  }
  $a1 ="";
  for ($x = 0; $x < mysqli_num_rows($query1); $x++) {
  $data1 = mysqli_fetch_assoc($query1);
   if($a1 != ""){
      $a1 = $a1.",'".$data1['date']."'"; 
   }
else {
    $a1 = "'".$data1['date']."'";
}
}


// getting attendance column from Table_attendance table 
 $my1 = "select attendance from Table_attendance";
 $qu1 = mysqli_query($con, $my1);
 
  if ( ! $qu1 ) {
    echo mysqli_error();
    die;
  }
  $a2 ="";
  for ($x = 0; $x < mysqli_num_rows($qu1); $x++) {
  $data2 = mysqli_fetch_assoc($qu1);
     if($a2 != ""){
      $a2 = $a2.",".$data2['attendance']; 
   }
else {
    $a2 = $data2['attendance'];
}
}

?>
<?php //ploting the graph  ?>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>

var xValues = <?php echo '['.$a1.']'; ?>;
var yValues = <?php echo '['.$a2.']'; ?>;

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      lineTension: 0,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options: {
    title: {display: true, text: 'Total attendance'},
    legend: {display: false},
    
                
                
                    
    scales: {
      yAxes: [{ticks: {min: 10, max:100}}],
    }
  }
});
</script>