Question

我使用C3来产生一小时的测量值。它每分钟更新一次，最旧的度量标准从数据集中弹出，并被new替换。所以在任何时候我都有最近60分钟的数据。

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

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

这不是完整的例子，但会做： http://jsfiddle.net/ht2nrmg7/4/

Answer 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

Answer 2

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

c轴图表勾选x轴

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

C3时间序列 - 每15分钟显示x刻度

2 个答案: