gpt4 book ai didi

javascript - flot 不绘制条形图

转载 作者:行者123 更新时间:2023-11-28 20:08:05 24 4
gpt4 key购买 nike

我尝试了其他两个脚本(折线图和饼图),但 flot 没有绘制条形图...你能帮我解决这个问题...我认为错误出在 javascript 中..

图书馆:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

这是 printdata 数据库调用:

[["junio",390],["julio",125],["agosto",50]]

这是 graficayear.php 中的脚本:

<?php
include 'includes/configs.php';
$sql = $conn->prepare("SELECT DATE_FORMAT(start, '%M') AS mdate, SUM(honorario) AS total_mes
FROM CITAS WHERE YEAR(current_date) GROUP BY mdate DESC");
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {

$datayear[] = array($row['mdate'],(int) $row['total_mes']);
}
?>

这是chartyear.php中的代码:

<?php include 'graficayear.php'; ?>
<script type='text/javascript' charset='utf-8'>
$(function () {
$.plot(
$("#baryear"),
[{
data : <?php echo json_encode($datayear);?>,
color: '#012D4C',
bars: { show: true, fillColor: '#4682b4', barWidth: (15*24*60*60*1000), align: 'center' }
}],
{
grid: { color: '#012D4C' },
xaxis: {
mode: 'time',
tickDecimals: 0,
tickSize: [1,'month'],
autoscaleMargin: 0.001
}
}
);
});
</script>

以及带有 ID 的 DIV:

<?php include 'chartyear.php'; ?>
<div id="baryear" style="width: 320px; height: 300px;"></div>

到目前为止,我的图表是这样的:

enter image description here

这是我需要在条形图中显示的数据:

enter image description here

最佳答案

您需要更仔细地阅读有关预期数据格式的文档。在这里您指定了 xAxis of type time但随后有given it categories 。您必须选择其中一种方式。

因此,考虑到 json 数据的格式,这里是执行您想要的操作的最短路径:

// given your data
var datayear = [["junio",390],["julio",125],["agosto",50]];

// split it into a data array and a ticks array
var data = [], ticks = [];
for (var i = 0; i < datayear.length; i++) {
data.push([i,datayear[i][1]]); // note that the x value is numeric
ticks.push([i,datayear[i][0]]); // and that the x value is matched to a "category"
}

$.plot(
$("#baryear"),
[{
data : data,
color: '#012D4C',
bars: { show: true, fillColor: '#4682b4', align: 'center' }
}],
{
grid: { color: '#012D4C' },
xaxis: {
ticks: ticks
}
});

fiddle here .

产品:

enter image description here

关于javascript - flot 不绘制条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20409058/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com