Question

我有一个类型为timeseries的c3js折线图。

我的轴表目前是这样的：

Showing the x-axis 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进行黑客攻击。

有没有办法将起始标签更改为12/10（所有后续标签每隔6个月会增加一次）？

更新（14NOV14）：我添加了一个有效的jsFiddle供您修改。任何帮助表示赞赏！ 更新（14NOV14）：我为此尝试了using functions。但我希望“弹出式”框始终显示灰色标题。

Answer 1

对于一个记录非常糟糕的图书馆来说，这是一个痛苦的漫长的学习过程。但我不得不使用一个函数作为tick的格式选项，然后再次为工具提示格式化标题。这是final, working copy。

HTML（包括d3.js，c3.js和c3.css脚本）

<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}以确保不应用任何内置增量。

c3js - 在x轴上更改初始日期标签

1 个答案: