javascript - 来自 PHP 的 Flot Chart
问题描述
我正在尝试使用数据库中的值制作一个浮动图表。我现在如何拥有它,该图表仅绘制 1 个数据点。我怎样才能让它绘制数组中的其余数据?我正在尝试绘制每个日期输入的代理总数。 var data2 将用于丢失的代理
<?php
foreach($mysqli->query('SELECT COUNT(*), agent_date_entered, agent_id
FROM agents GROUP BY agent_date_entered
ORDER BY agent_date_entered') as $row) {
$count[] = $row['COUNT(*)'];
$agent[] = $row['agent_id'];
$date[] = $row['agent_date_entered'];
}
?>
<script>
var data, data1, options, chart;
var data1 = [ <?php echo json_encode($count); ? > , < ? php echo json_encode($date); ?> ];
var data2 = [];
data = [{
data: data1,
label: "Agents Gained",
lines: {
show: true
},
points: {
show: true
}
}, {
data: data2,
label: "Agents Lost",
lines: {
show: true
},
points: {
show: true
}
}];
options = {
legend: {
position: "nw"
}
};
$(document).ready(function () {
chart = $.plot($("#placeholder"), data, options);
});
</script>
解决方案
借助对Data format和Time series data的评论之一中的链接,我找到了我正在寻找的答案。
以防万一其他人遇到这个问题,这是我如何让它工作的。首先,我将 sql 语句中的日期更改为: (UNIX_TIMESTAMP(agent_date_depart)*1000) AS date
. 然后我在设置变量时对其进行了编码$depart = json_encode(floatval($row['date']));
。为了使它在 x 轴上不是一个巨大的数字并显示为日期,我将 x 轴设置如下 xaxis: {mode: "time", timeformat: "%Y/%m/%d"},
:您甚至可以使用 tooltipOpts 设置工具提示中的日期格式,如下所示:
tooltipOpts: {
content: function (label, x, y) {
var date = new Date(+x);
var tooltip = '<h4>' + label + '</h4><ul>';
tooltip += '<li>Date ' + date.toLocaleDateString() + '</li>';
tooltip += '<li>Total Count: ' + y + '</li></ul>';
return tooltip;
},
我发现让数据显示在图表中的最简单方法是,我将 sql 语句放在 data 变量中,如下所示:
var d2 = [
<?php
$sql = "SELECT COUNT(agent_id), (UNIX_TIMESTAMP(agent_date_depart)*1000) AS date FROM agents
WHERE agent_date_depart BETWEEN '$bdatecy' AND '$edatecy'
GROUP BY agent_date_depart ";
$result = mysqli_query($mysqli, $sql);
while ($row = mysqli_fetch_assoc($result)) {
$agent = $row['COUNT(agent_id)'];
$depart = json_encode(floatval($row['date']));
echo "[".$depart.", ".$agent."],";
}
?>
];
希望这会有所帮助,我想再次感谢您提供这些链接。
推荐阅读
- ios - Facebook登录按钮不会立即更改为注销按钮在swift中登录后立即
- java - 如何在 Java 运行时生成现有类的字节码?
- github - 如果您将合作者添加到 github 公共存储库,他们会删除或损坏任何东西吗?
- asp.net - Web 应用程序在 Visual Studio 2017 中自动更改为网站
- git - 如何将 Github 中的整个 Projects Docs 下载为 Pdf?
- tabulator - 如何为呈现的页码设置持久性?
- c# - 如何在c#中查找数据表中的列总和
- java - 如何处理从相机保存图像的错误?
- angular-material - NVDA 未在 Chrome for Angular Material 中读取内容
- asp.net-web-api - Nativescript Axios 调用 Web API