从Chart.js的动态ID中获取数据

Question

我已经创建了一个简单的chart.js线图，它可以在静态"url“提供(Ex )的情况下生成图形。/test/data.php)。在data.php上有一串数据如下所示：

[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]

data.php的代码如下所示：

​

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'test');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
	die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = 21 ORDER BY created_at");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data); ?>

​

注意，treatment_fk是21。这意味着将为这个特定的客户生成图形。

我希望这样做，这样每次您访问cutomer.php页面时，都会为特定的客户生成一个图表(根据他们的数据)。因此，我为data.php重新编写了代码。相反，我将代码作为准备好的状态放入customer.php，其中treatment_fk将是一个变量：

​

        <?php
        
  $cid = htmlentities ($_GET['customer_id']);      
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");

$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
    $data[]['bdi'] = $bdi;
    $data[]['date'] = $date;
}
//free memory associated with result
$result->close();

//now print the data
print json_encode($data); ?>

​

所以现在，每次您访问具有不同ID(在url中)的唯一客户时，都会在customer.php页面上生成不同的数据字符串。

现在，我面临的问题是，我无法成功地基于这串数据(bdi与date)生成线条图。

这里是我的chart.js绘图字段的代码：

​

        $(document).ready(function(){
	$.ajax({
		url: "http://localhost/test/data.php",
		method: "GET",
		success: function(data) {
			console.log(data);
			var bdi = [];
			var date = [];

			for(var i in data) {
				date.push( data[i].date);
				bdi.push(data[i].bdi);
			}

			var chartdata = {
				labels: date,
				datasets : [
					{
						label: 'BDI',
						backgroundColor: 'rgba(239, 243, 255, 0.75)',
						borderColor: 'rgba(84, 132, 255, 0.75)',
						hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
						hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        
						data: bdi
					}
				]
			};

			var ctx = $("#mycanvas");

			var barGraph = new Chart(ctx, {
				type: 'line',
				data: chartdata,
                options: {
                    responsive: true,
        legend: {
            position: 'bottom',
            
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    drawBorder: false,
                    
                }
}],
            xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent",
                    display: false
                        },
                ticks: {
                    padding: 20,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold"
                }
            }]
        },
                    
            tooltips: {
                backgroundColor: 'rgba(255,255,255)',
                titleFontColor: 'rgb(184,189,201)',
                bodyFontColor: 'black',
                displayColors: false,
                borderColor: 'rgb(214,217,225)',
                borderWidth: 1,
                caretSize: 5,
                cornerRadius: 2,
                xPadding: 10,
                yPadding: 10
            }
        }
});
		},
		error: function(data) {
			console.log(data);
		}
	});
});

​

注意，URL是http://localhost/test/data.php。虽然这确实会生成图形，但它并不是特定于客户的图形。我尝试用id=12&operation=edit替换url (以测试URL中的更改是否有效)。但是，它仍然不生成图形。请记住，当我在源代码中访问id=12&operation=edit时，有一串数据bdi和日期。不管如何，仍然没有生成一个图。

以下是我的问题：

如何使动态，以便根据customer.php的特定ID生成一个图形？(有更好的方法吗？)

附注：请记住，当id=12&operation=edit作为chart.js代码中的url放置时，它不会生成一个图形。

Answer 1

在customer.php上创建的数组类型与在data.php上创建的数组类型不同。用下面的代码替换在客户中的while循环，您应该具有相同的JSON格式。

​

while(mysqli_stmt_fetch($stmt)) {
  $data[] = array('bdi' => $bdi, 'date' => $date);
}

​