c3js-在x轴上更改初始日期标签 [英] c3js - change the initial date label in x-axis
问题描述
我有一个类型为 timeseries 的c3js折线图.
I have a c3js line graph of type timeseries.
我的轴表当前是这样的:
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
并且希望它成为
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
每个点表示一个月，请注意，仍保留并显示11/10处的数据点，只有轴标签已更改.仅供参考，增量不是直接设置的，而是使用culling入侵的.
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
是否可以将起始标签更改为12/10(所有后续标签每6个月增加一次)?
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
更新(14NOV14):我添加了一个有效的 jsFiddle 以便您进行修改.感谢您的帮助！ 更新(14NOV14):为此，我已经尝试使用函数.但是我希望弹出"框始终显示灰色标题.
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated! UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
推荐答案
对于一个文档破烂的库来说，这是一个痛苦的漫长的学习过程.但是我必须为刻度线的格式选项使用一个函数，然后再次为工具提示设置标题的格式.这是最终的工作副本.
This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.
<body>
<div id="chartContainer"></div>
</body>
JS
var chart = c3.generate({
bindto: '#chartContainer',
data: {
x: 'x',
columns: [
['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if((x.getMonth()+1) % 6 === 0) {
return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
}
}
}
}
},
tooltip: {
format: {
title: function (d) {
var format = d3.time.format('%m/%y');
return format(d)
}
}
}
});
N.B.另请注意，culling可能会对此产生干扰.我必须设置culling: {max: 100}以确保不应用任何内置增量.
N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.
这篇关于c3js-在x轴上更改初始日期标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
