c3 js：我如何在X上按年分组
使用c3 js库进行图表（c3js.org）。 我试图实现类似于这张图表的东西（例如，在Q1，Q2，Q3，Q4之后在2011年，2012年，2013年单独添加一个年份标签） 
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格式显示每个标签中年份的x轴。 我想在标签的第一行显示月份和日期，并在下一行显示年份（不重复）。 就像：
format: function(){
var label = '%m-%d';
if(year!written)
label +='%Y';
return label;
}
您可以使用刻度格式来写这些标签
...
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是图表容器的ID
最后隐藏所有的刻度标记（或者你可以使用CSS类型选择器来隐藏/显示你不想要的）
#chart .tick line {
display:none;
}
小提琴 - http://jsfiddle.net/rg082b19/
当你运行时，我有小提琴不间断的问题，但这不会发生在小提琴之外。 所以如果你没有看到轴标签向下移动，只需将代码复制到本地HTML文件中即可。
