c3js - change the initial date label in x-axis

问题

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

and it want it to be

.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....

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.

Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?

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.

回答1:

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.

HTML (Include the d3.js, c3.js, and c3.css scripts too)

<body>
    <div id="chartContainer"></div>
</body>

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. 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.

来源：https://stackoverflow.com/questions/26878054/c3js-change-the-initial-date-label-in-x-axis

标签

d3.js

javascript

c3.js