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

我使用C3产生一个小时的测量值。它每分钟更新一次，并且最早的度量标准从数据集中弹出并由新的替换。所以在任何时候我都有最近60分钟的数据。C3时间序列 - 每15分钟只显示x个刻度

我想仅在：00，：15，：30，：45分钟显示x值。通过计数，我可以将滴答数量限制为4，但是它会从图表创建时间开始。

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

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

来源

2017-06-27 CountGradsky

首先我们必须显示所有蜱 - 禁止扑杀：

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

来源

2017-06-28 11:16:33

您可以设置将在图表中显示刻度线的精确值，我依靠momentjs它有一个真棒的方式来增加/减去给定日期的持续时间。

C3图表蜱对于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; 
}

来源

2017-11-15 19:10:07 Sonicd300

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

回答

相关问题