c3 js: Как я могу группировать по годам по меткам оси X?

Question

Использование библиотеки c3 js для диаграмм (c3js.org). I'am пытаются достичь что-то похожее на этой диаграмме (т.е. добавить год этикетку 2011, 2012, 2013 на отдельной строке после Q1, Q2, Q3, Q4)

var chart = c3.generate({ 
data: { 
    x: 'x', 
    columns: [ 
     ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2014-01-04', '2014-01-05', '2014-01-06'], 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 130, 340, 200, 500, 250, 350] 
    ] 
}, 
axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: '%Y-%m-%d' 
     } 
    } 
} 
}); 

показать это ось х с год каждая метка в формате year-month-day. Я хочу показать только месяц и дату на первой строке метки и год в следующей строке (без повторения). Вроде как:

format: function(){ 
    var label = '%m-%d'; 
    if(year!written) 
      label +='%Y'; 
    return label; 
} 

Answer 1

Вы можете сделать это, используя формат клеща писать этикетки

... 
tick: { 
    culling: false, 
    count: (x.length - 1) * 2 - 1, 
    format: function (d) { 
     // show the year in place of Jul 
     if (d.getMonth() === 6) 
      return d.getFullYear(); 
     // ignore other non quarter months 
     else if ([1, 4, 7, 10].indexOf(d.getMonth()) === -1) 
      return ''; 
     // quarter months 
     else 
      return 'Q' + parseInt(d.getMonth()/3 + 1); 
    } 
} 
... 

где x является массив метки даты

---

Затем с помощью d3 для выбора и нажмите на этикетки года немного вниз

// push the years down 
d3.selectAll('#chart .tick text tspan')[0].forEach(function (d) { 
    var tspan = d3.select(d); 
    if (!isNaN(Number(tspan.text()))) 
     tspan.attr('dy', '2em') 
    else 
     tspan.attr('dy', '0.5em') 
}) 

chart где это идентификатор диаграммы контейнера

---

И, наконец, скрывающее все засечки (или вы можете использовать CSS п-о-типа селектор, чтобы скрыть/показать те, которые вы не хотите)

#chart .tick line { 
    display:none; 
} 

---

Fiddle - http://jsfiddle.net/rg082b19/

У меня периодические проблемы с Fiddle не толкая этикетки делают wn, когда вы бежите, но это не происходит за пределами скрипки. Поэтому, если вы не видите метки оси, движущиеся вниз, просто скопируйте код в локальный файл HTML, и он будет работать.

---