Question

我有一个由c3js图表库制作动态数据的折线图。

在该图表中，我已经显示数据取决于具有时间序列的日期。这是图表的样本。

现在我添加了三个按钮，按day，month和year在图表中显示数据。当我点击day按钮时，我希望每天只显示数据。而year和month按钮也是。

重点是，我想在点击day，month和year按钮时动态更改x轴日期格式。

所以我从数据库查询每天，每月和每年的数据。但问题是，当我在图表中显示数据时，我需要在x轴上动态更改日期格式。所以，我试试这个，

<?php
if(isset($_POST['btn_day'])) {
     $sql = "......."
     $query = ........;
     //query data day by day just like DATE_FORMAT(date, '%d') as date
     .
     $format = '%d';
}elseif(isset($_POST['btn_month'])) {
     $sql = "......."
     $query = ........;
     //query data for each month just like DATE_FORMAT(date, '%M') as date
     .
     $format = '%m';
}elseif(isset($_POST['btn_year'])) {
     $sql = "......."
     $query = ........;
     //query data for each year just like DATE_FORMAT(date, '%Y') as date
     .
     $format = '%Y';
}else {
     $sql = "......."
     $query = ........;
     .
     .
     $format = '%Y-%m-%d';
}
?>
<script>
        var f = <?php echo "'".$format."'"?>; //'%Y-%m-%d'
        console.log(f);
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'date',
                json:<?php echo json_encode($data);?>,
                mimeType: 'json',
                keys: {
                    x: 'date',
                    value:  <?php echo json_encode($names)?>
                },
                type: 'line',
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick:{
                        format: function(f){
                                if(f == "%d"){
                                    return d3.getDay();
                                }else if(f == "%m"){
                                    return d3.getMonth();
                                }else if(f == "%Y"){
                                    return d3.getFullYear();
                                }else{
                                    return '%Y-%m-%d';
                                }
                        },
                        rotate: 75,
                    }
                }
            },          

        });
</script>

但我没有在图表中得到正确的结果。我知道这部分我错了，

tick:{
    format: function(f){
        if(f == "%d"){
            return d3.getDay();
        }else if(f == "%m"){
            return d3.getMonth();
        }else if(f == "%Y"){
            return d3.getFullYear();
        }else{
            return '%Y-%m-%d';
        }
    },
    rotate: 75,
}

但我不知道如何动态更改x轴日期格式。我已经尝试了很多方法，但我无法得到正确的结果。

我非常感谢任何建议。

Answer 1

d3没有getDay（）/ getMonth（）/ getFullYear（）函数，你需要的东西（如果f存在）是

d3.time.format(f)

请参阅https://github.com/mbostock/d3/wiki/Time-Formatting

（而且，就图表而言，你并没有真正动态地改变格式，你每次都会生成一个新的c3图表，尽管这可能只是语义。）

如何在c3js图表中动态更改x轴日期格式？

1 个答案: