c3js›时间序列x值未均匀分布 [英] c3js › Timeseries x values not evenly spaced

查看：100
本文介绍了c3js›时间序列x值未均匀分布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在分配给图形值的标签时遇到问题。



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



我使用纯时间戳记（以秒为单位），然后使用label.format将其转换为字符串。



但是，会发生这种情况：



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

$ b $ $ b

，您会注意到空间不是均匀分布的，在10月18-21日，25-28日和11月1-4日，11月4-7日之间只有两天，而其他所有日期之间都有三天。



是什么原因造成的？



我想平均分配空白（相同的天数）。



以下是带有代码的小提琴：
http://jsfiddle.net/ok1k6yjo/ 

  var array_times = [1414540800，1414627200]; 
 var array_values = [67，66.22]; 
 
 var labelWeight =‘公斤重量’； 
 
 var window_period =（30 * 24 * 3600）; //最近30天
 
今天var = Math.floor（new Date（2014,10,20,0,0,0,0）.getTime（）/ 1000）; 
 var timeEnd =今天； 
 var timeStart =今天-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）; 
 
函数dateToString（e）{
 var date = new Date（e * 1000）; 
返回date.toDateString（）。substring（4）; 
} 
 
 
 var chart = c3.generate（{
 bindto：'#chart'，
 data：{
x：'times '，
列：[
 ['times']。concat（toShowTime），
 [labelWeight] .concat（toShowValues）]，
标签：{
格式：{{
y：d3.format（'。2'）
} 
}，
类型：'scatter'
}，
点：{
r：6 
}，
图例：{
 show：false 
}，
网格：{
x：{
 show： true 
}，
y：{
 show：true 
} 
}，
轴：{
x：{
标签： {
 text：'Time [days]'
}，
 type：'timeseries'，
 tick：{
 fit：false，
 //计数：29，
轮换：-75，
多行：false，
格式：函数（e，d）{
 return dateToString（e）; 
} 
}，
高度：100 
}，
y：{
标签：{
文字：'Weight [kg]'， 
位置：外部，
最小值：minV-10，
最大值：maxV + 10 
}，
滴答声：{
格式：function（ e，d）{
返回parseFloat（e）.toFixed（2）; 
} 
}，
} 
} 
}）； 
 
 chart.axis.range（{min：{x：t​​imeStart，y：minV-10}，max：{x：t​​imeEnd，y：maxV + 10}}）;

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



这里是另一个有类似问题的小提琴。
http://jsfiddle.net/hfznh45w/5/ 

  var d =（24 * 3600 ）; //最近30天
 
 
 // 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 =‘公斤重量’； 
 
 var window_period =（30 * 24 * 3600）; //最近30天
 
今天var = Math.floor（new Date（2014，10，20，0，0，0，0）.getTime（）/ 1000）; 
 var timeEnd =今天； 
 var timeStart =今天-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）; 
 
函数dateToString（e）{
 var date = new Date（e * 1000）; 
返回date.toDateString（）。substring（4）; 
} 
 
 
 var chart = c3.generate（{
 bindto：'#chart'，
 data：{
x：'times '，
列：[
 ['times']。concat（array_times），[labelWeight] .concat（array_values）]，
标签：{
格式：{
y：d3.format（'。2'）
} 
}，
类型：'scatter'
}，
点：{
r： 6 
}，
图例：{
显示：false 
}，
网格：{
x：{
显示：true 
}，
y：{
显示：true 
} 
}，
轴：{
x：{
填充：{
左：0，
右：0，
}，
标签：{
文本：'Time [days]'
}，
类型： 'timeseries'，
 tick：{
 fit：false，
 rot吃：-75，
多行：false，
格式：函数（e，d）{
 return dateToString（e）; 
} 
}，
高度：100 
}，
y：{
填充：{
上：0，
下：0 
}，
标签：{
文字：'Weight [kg]'，
 position：'outer'，
 min：minV-10，
 max：maxV + 10 
}，
滴答：{
格式：函数（e，d）{
返回parseFloat（e）.toFixed（2）; 
} 
} 
} 
} 
}）； 
 
 chart.axis.range（{
 min：{
x：timeStart，
y：minV-10 
}，
 max：{ 
x：timeEnd，
y：maxV + 10 
} 
}）;

任何线索/解决方法都非常受欢迎。
谢谢！

解决方案

c3js允许您指定x轴上将出现的刻度。 / p>

在轴/ x /刻度线下，我添加了此内容-

 值： [1413936000，1414195200,1414454400,1414713600,1414972800,1415232000]，

我在三天内转换了您的日期纪元转换器的时间间隔。



以下是解决方案的参考。



我只能假设网格线与这三个都不匹配日间滴答作响，然后他们每隔n个滴答滴答地推入新的一天-因此您的问题。
或者，您可以手动放置网格线。



这是x轴的代码。

  x：{
标签：{
文本：时间[天] 
}，
类型： timeseries，
刻度：{
值：[1413936000， 1414195200,1414454400,1414713600,1414972800,1415232000]，
适合：false，
 //计数：29，
轮换：-75，
多行：false，
格式：函数（e，d）{
 return dateToString（e）; 
} 
}，
高度：100 
}，


I am having an issue with the labels assigned to the values of my graph.

The graph is a timeseries. I add values using the 'columns' property of c3js.

I use pure timestamps (in seconds) and then convert them into strings using the label.format.

However, this is what happens:

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

as you can notice the space is not evenly distributed, between 18-21, 25-28 October and 1-4, 4-7 November just two days while all others have three days between the dates.

What is causing this?

I would like to have evenly spaces gaps (same number of days).

Here is a jfiddle with the code: 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}});

The slight difference is due to a different starting date.

Here is another fiddle with similar issues. 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
    }
});

Any clue/fix is more than welcome. Thank you!

解决方案

c3js allows you to specify what ticks will appear on x axis.

Under axis/x/tick I added this -

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

I converted your dates in three day intervals with the epoch converter.

Here's the reference for solution.

I can only assume if the gridlines don't match these three day ticks then they were pushing into a new day every nth tick - hence your issue. Alternatively, you can place gridlines manually.

Here's the code for x axis.

        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
        },

这篇关于c3js›时间序列x值未均匀分布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆