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

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 轴日期格式？

How to change x-axis date format dynamically in c3js chart?

javascript

php

c3.js