flot不画条形图

Question

我尝试了我的另外两个脚本（折线图和饼图），但是flot没有绘制条形图...你能帮我解决这个问题吗...我认为错误是在javascript .. < / p>

图书馆：

<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>

这是我的图表到现在为止的样子：

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

Answer 1

您需要更仔细地阅读有关预期数据格式的文档。在这里，您指定了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
         }
     });

小提琴here。

产地：