如何在c3js圖表中動態更改x軸日期格式？

我有一個由c3js圖表庫生成的動態數據折線圖。如何在c3js圖表中動態更改x軸日期格式？

在該圖表中，我已經顯示數據取決於日期和時間序列。這是圖表的示例。

現在我添加三個按鈕通過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軸日期格式。我已經嘗試了很多方法，但無法獲得正確的結果。

我非常感謝您的任何建議。

來源

2016-02-02 Cloud

D3沒有getDay（）/得到月（）/和getFullYear（）函數，你需要什麼（如果f存在）是

d3.time.format(f)

見https://github.com/mbostock/d3/wiki/Time-Formatting

（此外，你並沒有真正改變格式，就圖表而言，你每次都會生成一個新的c3圖表，但這可能只是語義。）

來源

2016-02-02 09:49:09 mgraham

所以，你的意思是，如果我需要改變時間格式，我需要製作新的圖表。對？ – Cloud

in「format：function（f）」，f將是一個日期而不是你的php格式的字符串。這個日期，你可以申請getDay（），getMonth（），但你需要訪問php的格式字符串與PHP聲明（PHP的不是我的強項）。作爲一個單獨的點，您使用的格式字符串語法（「％d」，％m「和」％Y「）可以與d3.time.format（）一起使用，作爲生成刻度標籤日期部分的替代方法對不起，我很困惑 – mgraham

請問你可以給我看示例代碼嗎？因爲當我按照你的說法嘗試時，我只會得到這樣的'％Y-％m-％d'，我被困在這個錯誤中。 – Cloud

如何在c3js圖表中動態更改x軸日期格式？

回答

相關問題