如何使用c3js在X軸上繪製一週的時間間隔？

Question

我想繪製與c3.js庫一個圖表，顯示在x軸的一週間隔，如下圖：

我有一個其中有幾個日期，我想用一個JSON文件：

{ 
    "foo": 1, 
    "date": "2016-09-20" 
}, 
{ 
    "foo": 2, 
    "date": "2016-09-21" 
}, 
{ 
    ... 
} 

我該怎麼做？

Answer 1

我會讓這是一個評論，但我不能，所以我的建議是使用d3.js而不是c3.js創建這個線圖。這是一個非常好的教程Setting up axes in d3.js，它將生成上面的圖表，並且您可以自定義您想要的x軸。 weekly x axis

Answer 2

我發現了這個問題的答案。 我的JSON數據有一個名爲「weekDetails」的字段，它包含一個具有星期間隔的字符串，如每個寄存器的「Sep 22-28」。有了這個信息，我有打電話像下面的函數加載JSON和指定爲X軸的鍵值，那就是「weekDetails」

chart.load({ 
    json: myJson, 
    keys: { 
     x: 'weekDetails', 
     value: ['value1', 'value2', 'value3'] 
    } 

}); 

之後，你必須改變屬性x：在c3.generate（）函數 '類別'，如下圖所示：

axis: { 
    x: { 
     type: 'category' 
    } 
} 

我的JSON文件將是這樣的：

{ 
    "foo": "foo", 
    "weekDetails": "Sep 1-7" 
}, 
{ 
    "foo": "foo", 
    "weekDetails": "Sep 8-15" 
}, 
{ 
    "foo": "foo", 
    "weekDetails": "Sep 16-23" 
}...