C3 时间序列 - 仅每 15 分钟显示 x 个刻度答案

【问题标题】：C3 Timeseries - show x ticks only every 15 minutesC3 时间序列 - 仅每 15 分钟显示 x 个刻度
【发布时间】：2017-06-27 10:33:48
【问题描述】：

我正在使用 C3 生成一个小时的测量值。它每分钟更新一次，最旧的指标从数据集中弹出并被新指标取代。因此，在任何给定时间，我都有过去 60 分钟的数据。

我想仅在 :00、:15、:30、:45 分钟显示 x 值。使用 count 我可以将刻度数限制为 4，但它从图表创建时间开始。

x: {
  type: 'timeseries',
  tick: {
    //fit: true,
    //count: 4,
    format: '%H:%M'
  }
}

这不是完整的示例，但可以： http://jsfiddle.net/ht2nrmg7/4/

【问题讨论】：

标签： javascript charts c3.js

【解决方案1】：

首先我们必须显示所有刻度 - 禁用剔除：

axis: {
    x: {
        tick: {
            culling: false,

然后我们必须检测并隐藏您不想显示的特定记号。

我们获取刻度文本，从中解析分钟并检查它是否与 15 分钟步长对齐。如果不是 - 我们隐藏该元素：

var chart = c3.generate({
    onrendered: function() {
    var cat = this
        .selectChart
        .select('.c3-axis-x')
        .selectAll('text')
        .each(function() {
            var text = d3.select(this).text();
            var textMin = text.match(/:(\d\d)/);
            if (!textMin) return;
            var m = parseInt(textMin[1], 10);
            if (m % 15 !== 0) {
                d3.select(this).style({ display: 'none'})
            }
        })
},
...

See updated fiddle

【讨论】：

【解决方案2】：

您可以设置将在图表中显示的刻度的确切值，我依赖于 momentjs，它有一种很棒的方式来添加/减去给定日期的持续时间。

x 轴的 c3 图表刻度

tick: {
  format: '%H:%M',
  rotate: -90,
  values: this.every(15, 'minutes')
}

基于momentJS的日期数组生成器

every(increment, unit) {
  const startDate = ...; //<-- Your initial date
  const stopDate = ...;  //<-- Your stop date

  let ticks = [];
  let currentDate = startDate;

  while (currentDate <= stopDate) {
    ticks.push(currentDate)
    //Note the format part has to match you data.xFormat pattern
    currentDate = moment(currentDate).add(increment, unit).format('Y-MM-DD HH:mm:ss');
  }

  return ticks;
}

【讨论】：