gpt4 book ai didi

c3.js - c3js › 时间序列 x 值不均匀分布

转载 作者:行者123 更新时间:2023-12-04 01:54:13 26 4
gpt4 key购买 nike

我对分配给图表值的标签有问题。

该图是一个时间序列。我使用 c3js 的 'columns' 属性添加值。

我使用纯时间戳(以秒为单位),然后使用 label.format 将它们转换为字符串。

然而,事情是这样的:

https://drive.google.com/file/d/0B9GDftIYQFIVb2Z3N2JfS2pzVjg/view?usp=sharing

正如您所看到的,空间分布并不均匀,10 月 18 日至 21 日、25 日至 28 日和 11 月 1 日至 4 日、11 月 4 日至 7 日之间只有两天,而所有其他日期之间都有三天。

这是什么原因造成的?

我希望间隔均匀(天数相同)。

这是代码的 jfiddle:
http://jsfiddle.net/ok1k6yjo/

var array_times = [1414540800, 1414627200];
var array_values = [67, 66.22];

var labelWeight = 'weight in kg';

var window_period = (30 * 24 * 3600); // last 30 days

var today = Math.floor(new Date(2014,10,20,0,0,0,0).getTime() / 1000);
var timeEnd = today;
var timeStart = today - window_period;

var toShowTime = [1414540800, 1414627200];
var toShowValues = [67, 66.22];


var minT = Math.min.apply(null, array_times),
maxT = Math.max.apply(null, array_times.concat(today));

var minV = Math.min.apply(null, array_values),
maxV = Math.max.apply(null, array_values);

function dateToString(e) {
var date = new Date(e * 1000);
return date.toDateString().substring(4);
}


var chart = c3.generate({
bindto: '#chart',
data: {
x: 'times',
columns: [
['times'].concat(toShowTime),
[labelWeight].concat(toShowValues)],
labels: {
format: {
y: d3.format('.2')
}
},
type: 'scatter'
},
point: {
r: 6
},
legend: {
show: false
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
axis: {
x: {
label: {
text: 'Time [days]'
},
type: 'timeseries',
tick: {
fit: false,
//count: 29,
rotate: -75,
multiline: false,
format: function (e, d) {
return dateToString(e);
}
},
height: 100
},
y: {
label: {
text: 'Weight [kg]',
position: 'outer',
min: minV - 10,
max: maxV + 10
},
tick: {
format: function (e, d) {
return parseFloat(e).toFixed(2);
}
},
}
}
});

chart.axis.range({min: {x:timeStart, y:minV-10}, max: {x:timeEnd, y:maxV+10}});

略有不同是由于不同的开始日期。

这是另一个类似问题的 fiddle 。
http://jsfiddle.net/hfznh45w/5/
var d = (24 * 3600); // last 30 days


//var array_times = [1414540800-8*d, 1414540800-d, 1414540800, 1414627200, 1414627200 + d, 1414627200 + 2 * d, 1414627200 + 3 * d];
//var array_values = [61, 60, 67, 66.22, 68, 68, 68];

var array_times = [];
var array_values = [];

for (var i = -8; i < 30; i++) {
array_times.push(1414540800 + (i * d));
array_values.push(60 + i);
}

console.log(array_times);
console.log(array_values);

var labelWeight = 'weight in kg';

var window_period = (30 * 24 * 3600); // last 30 days

var today = Math.floor(new Date(2014, 10, 20, 0, 0, 0, 0).getTime() / 1000);
var timeEnd = today;
var timeStart = today - window_period;


var minT = Math.min.apply(null, array_times),
maxT = Math.max.apply(null, array_times.concat(today));

var minV = Math.min.apply(null, array_values),
maxV = Math.max.apply(null, array_values);

function dateToString(e) {
var date = new Date(e * 1000);
return date.toDateString().substring(4);
}


var chart = c3.generate({
bindto: '#chart',
data: {
x: 'times',
columns: [
['times'].concat(array_times), [labelWeight].concat(array_values)],
labels: {
format: {
y: d3.format('.2')
}
},
type: 'scatter'
},
point: {
r: 6
},
legend: {
show: false
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
axis: {
x: {
padding: {
left: 0,
right: 0,
},
label: {
text: 'Time [days]'
},
type: 'timeseries',
tick: {
fit: false,
rotate: -75,
multiline: false,
format: function (e, d) {
return dateToString(e);
}
},
height: 100
},
y: {
padding: {
top: 0,
bottom: 0
},
label: {
text: 'Weight [kg]',
position: 'outer',
min: minV - 10,
max: maxV + 10
},
tick: {
format: function (e, d) {
return parseFloat(e).toFixed(2);
}
}
}
}
});

chart.axis.range({
min: {
x: timeStart,
y: minV - 10
},
max: {
x: timeEnd,
y: maxV + 10
}
});

任何线索/修复都非常受欢迎。
谢谢!

最佳答案

c3js 允许您指定 x 轴上将出现哪些刻度。

在轴/x/刻度下我添加了这个 -

values: [1413936000, 1414195200,1414454400,1414713600,1414972800,1415232000],

我使用 epoch converter 以三天为间隔转换您的日期.

Here's the reference for solution.

我只能假设如果网格线与这三天的刻度不匹配,那么它们每第 n 个刻度就会进入新的一天 - 因此你的问题。
或者,您可以放置​​ gridlines manually .

这是 x 轴的代码。
        x: {
label: {
text: 'Time [days]'
},
type: 'timeseries',
tick: {
values: [1413936000, 1414195200,1414454400,1414713600,1414972800,1415232000],
fit: false,
//count: 29,
rotate: -75,
multiline: false,
format: function (e, d) {
return dateToString(e);
}
},
height: 100
},

关于c3.js - c3js › 时间序列 x 值不均匀分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27469937/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com