1. 技术文章
  2. c3js › Timeseries x values not evenly spaced

c3js › Timeseries x values not evenly spaced

由 人盡茶涼 提交于 2019-12-01 15:43:14

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

Set tick.fit to false can make the ticks be positioned according to x value of the data points.

http://c3js.org/reference.html#axis-x-tick-fit

axis: {
  x: {
    tick: {
      fit: true
    }
  }
}

Here's the sample from official site http://c3js.org/samples/axes_x_tick_fit.html

I tried all of the answers suggested, but none gave me what I wanted. The closest was Partha's answer, however, selecting category as your chart type creates an unsightly padding on the left and right of the graph.

The solution that worked best for me was to exclude labels from my graph and instead work with an indexed graph. From there, I manually format each index to the proper date using the format function.

Here's a simplified version of the original poster's code:

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

var array_times = [1414540800, 1414627200, 1414627200 + d, 1414627200 + 2 * d, 1414627200 + 3 * d, 1456528117];
var array_values = [67, 66.22, 68, 68, 68, 77];

var labelWeight = 'weight in kg';

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


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


var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
          // Notice that I removed the datetimes from here
          [labelWeight].concat(array_values)
        ],
        type: 'area'
    },
    point: {
        r: 6
    },
    legend: {
        show: false
    },
    grid: {
        x: {
            show: true
        },
        y: {
            show: true
        }
    },
    axis: {
        x: {
            label: {
                text: 'Time [days]'
            },
            type: 'indexed',
            tick: {
                rotate: 90,
                // I reference array_times manually here to 
                // convert the index to a user-friendly label 
                format: function (index) {
                    return dateToString(array_times[index]);
                }
            }
        }
    }
});

Working fiddle: http://jsfiddle.net/uop61zLc/1/

I also faced the problem.Here is how I have resolved. Use the x-axis as category and not timeseries, and manipulate the corresponding tick format to look as if it is timeseris.

I have simplified the prob to make it generic.

Problem (irregular spacing):

var chart = c3.generate({
            data: {
                x: 'xtime',
                xFormat: '%Y-%m-%d-%H-%M-%S',
                columns: [
                    ['xtime', '2015-05-20-05-10-13', '2015-05-20-05-11-13', '2015-05-21-06-10-13'],
                    ['value', 30, 50, 20]
                ]
            },
            size: {
                height: 300,
                width: 600
            },
            axis: {
                x: {
                    type: 'timeseries',
                    // type: 'category',
                    tick: {
                        // format: function(x) {
                        //     var dateSubs = this.api.categories()[x].split('-'),
                        //         newDate = new Date(dateSubs[0], dateSubs[1], dateSubs[2], dateSubs[3], dateSubs[4], dateSubs[5], 0);
                        //
                        //     return newDate.toLocaleString();
                        // }

                         format: '%e-%b-%Y %H:%M'
                    }
                }
            }
        });
    <link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="chart"></div>

Solution :

var chart = c3.generate({
            data: {
                x: 'xtime',
                xFormat: '%Y-%m-%d-%H-%M-%S',
                columns: [
                    ['xtime', '2015-05-20-05-10-13', '2015-05-20-05-11-13', '2015-05-21-06-10-13'],
                    ['value', 30, 50, 20]
                ]
            },
            size: {
                height: 300,
                width: 600
            },
            axis: {
                x: {
                    // type: 'timeseries',
                    type: 'category',
                    tick: {
                        format: function(x) {
                            var dateSubs = this.api.categories()[x].split('-'),
                                newDate = new Date(dateSubs[0], dateSubs[1], dateSubs[2], dateSubs[3], dateSubs[4], dateSubs[5], 0);
                        
                            return newDate.toLocaleString();
                        }

                         // format: '%e-%b-%Y %H:%M'
                    }
                }
            }
        });
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="chart"></div>
标签
c3.js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!