英文:
How can I display the date in a CanvasJs chart in the x axix
问题
我想从control_data表中获取日期和贷款余额，并在图表上显示这些数据，X轴上显示日期，Y轴上显示贷款余额。我能够显示贷款金额，但无法显示日期细节。
<?php
// 加载数据库凭据
require_once realpath(__DIR__ . "/vendor/autoload.php");
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable(__DIR__);
$dotenv->load();
$db_username = $_ENV['DB_USERNAME'];
$db_password = $_ENV['DB_PASSWORD'];
$db_host = $_ENV['DB_HOST'];
$mysqli = new mysqli($db_host, $db_username, $db_password, 'pawn_db') or die(mysqli_error($mysqli));
// 获取数据
$result = $mysqli->query("SELECT * FROM control_data WHERE BRANCH_ID = '1' AND DataDate >= '2021-01-01' AND DataDate <= '2021-01-31' AND Loan <> 0") or die($mysqli->error);
echo mysqli_num_rows($result);
// 数据存入数组
$dataPoints = array();
if (mysqli_num_rows($result) > 0) {
// 创建一个包含结果的数组
while ($row = mysqli_fetch_array($result)) {
//$currentDate =date(strtotime($row['DataDate'] ));
$date = ($row['DataDate']);
$point = array("x" => date('d-m', strtotime($date)), "y" => $row['Loan']);
array_push($dataPoints, $point);
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"
title: {
text: "Simple Column Chart with Index Labels"
},
axisY: {
includeZero: true
},
data: [{
type: "column", //change type to bar, line, area, pie, etc
//indexLabel: "{y}", //Shows y value on all Data Points
indexLabelFontColor: "#5A5757",
indexLabelPlacement: "outside",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
我期望看到一个带有日期的柱状图。但是什么也没有显示。然而，如果我将数据转换为strtotime，则图表可以显示。但我希望显示日期而不是strtotime数据。
英文:
I would like to obtain the date and the loan balance from contol_data table and display the data in a chart with date on the x axix and loan balance in the y axix. I am able to display loan amounts but not date details
<?php
// load database credentials
require_once realpath(__DIR__. "/vendor/autoload.php");
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable(__DIR__);
$dotenv ->load();
$db_username = $_ENV['DB_USERNAME'];
$db_password = $_ENV['DB_PASSWORD'];
$db_host = $_ENV['DB_HOST'];
$mysqli = new mysqli($db_host, $db_username, $db_password,'pawn_db') or die(mysqli_error($mysqli));
// obtain data
$result = $mysqli->query("SELECT * FROM control_data WHERE BRANCH_ID = '1' AND DataDate >= '2021-01-01' AND DataDate <= '2021-01-31' AND Loan <>0") or die($mysqli->error);
echo mysqli_num_rows($result);
// data to an array
$dataPoints = array();
if(mysqli_num_rows($result) > 0){
// create an arry with results
while($row = mysqli_fetch_array($result))
{
//$currentDate =date(strtotime($row['DataDate'] ));
$date = ($row['DataDate']);
$point = array("x" => date('d-m',strtotime($date)) , "y" => $row['Loan']);
array_push($dataPoints, $point);
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"
title:{
text: "Simple Column Chart with Index Labels"
},
axisY:{
includeZero: true
},
data: [{
type: "column", //change type to bar, line, area, pie, etc
//indexLabel: "{y}", //Shows y value on all Data Points
indexLabelFontColor: "#5A5757",
indexLabelPlacement: "outside",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
I expected a bar chart with dates on the x axix. But nothing shows. Howener, if I conver data to strtotime the chart can be dispayed. But I want the date to dispay istead of strtotime data.
答案1
得分: 1
要显示带有时间轴的图表，您需要将PHP时间戳 strtotime($date) 转换为JavaScript时间戳，方法是将PHP时间戳乘以1000。此外，您需要将xValueType设置为dateTime，因为您要传递时间戳给数据点。如果您希望以“d-m”的格式显示轴标签，请为axisX设置valueFormatString为DD-MM。
英文:
To display chart with time axis, you need to convert PHP timestamp strtotime($date) to javascript timestamp by multiplying PHP timestamp with 1000. Also, you need to set xValueType to dateTime as you are passing timestamp to datapoints. If you want to display the axis labels in the format "d-m", set the valueFormatString for axisX to DD-MM.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论