Как построить недельный интервал по оси X с помощью c3js?

Question

Я хочу, чтобы построить график с c3.js библиотекой, которая отображает недельный интервал в оси х, как на рисунке:

У меня есть файл в формате 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'] 
    } 

}); 

После этого, вы должны изменить свойство х: к 'категории' в функции 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" 
}...