c3js - 更改 x 轴中的初始日期标签答案

【问题标题】：c3js - change the initial date label in x-axisc3js - 更改 x 轴中的初始日期标签
【发布时间】：2015-01-08 18:41:23
【问题描述】：

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

我的轴表目前是这样的：

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 个月增加一次）？

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

【问题讨论】：

你能把一个 plunkr 放在一起来了解你做得更好吗？
@Sebastian Plu - 我正在努力做一个......但运气不太好 - plnkr.co/edit/yASPgG76uA7WDsZz2Au4?p=preview 和 jsfiddle.net/ew9kpx3r
@Sebastian Plu - 如果您查看c3js.org/samples/timeseries.html，则相当于我想要的 x 轴仅在 '2013-01-02' 开始标记轴，并且有一个每 2 天贴一次标签。所以它会错过'2013-01-01'，'2013-01-03'......即使数据点仍然存在。
你有它在 jsfiddle 中的剔除技巧吗？
@anoop Culling 不是我想要遵循的 hack，因为如果客户添加了不同的/新的日期，我就是碎肉。请参阅我最新的 jsFiddle（在更新中）。感谢您的关注和帮助！

标签： d3.js javascript c3.js

【解决方案1】：

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

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

<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)
            }
        }
    }
});

注意另请注意，culling 可能会干扰此操作。我必须设置 culling: {max: 100} 以确保不应用任何内置增量。

【讨论】：