动态时间序列C3js图表

Dynamic timeseries C3js chart

本文关键字：图表 C3js 时间序列 动态      更新时间：2023-09-26

我是C3.js的新手，正在尝试创建动态时间序列图，请在fiddle中运行代码http://jsfiddle.net/roytirthadeep/54v7r0ab/

var chart = c3.generate({
        data: { 
            x: 'x',
            xFormat: '%Y-%m-%dT%H:%M:%S',
            columns: []
        },
         axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%H:%M:%S',
                }
            }
        },
        legend: {
            position: 'right'
        }
    });
    //"2013-01-01T00:00:01"
    var timeInc = 1;
    var value = 1;
    var interval = setInterval(function () {
        value = value + 1;
        timeInc++;
        var str;
        if (timeInc > 59) {
            clearInterval(interval);
            return;
        }
        if (timeInc >= 10) {
            str = ''+timeInc;
        } else {
            str = '0'+timeInc;
        }    
        xValue = "2013-01-01T00:00:"+str;
        if (value)
        if (value < 7) {
         console.log("xValue",xValue);
        console.log("value",value);
          chart.flow({
              columns: [
                ['x', xValue],
                ['data3', value]
              ],
              length:0
          });
        } else {
            chart.flow({
              columns: [
                ['x', xValue],
                ['data3', value],
                ['data4', value*2],
                ['data5', value/2],
                ['data6', value-1]  
              ],
              length:0
          });
        }    
    }, 1000);

Q1.这是在C3.js中实现所需行为的正确方法吗？

Q2.如何实现http://www.highcharts.com/stock/demo/dynamic-update高图表后面（从空白图表开始）

我得到了一个解决方案，并将其添加为答案。

我得到了一个解决方案，通过重置x轴范围和检查阈值来实现像Highcharts这样的期望行为。这可能对其他人有帮助http://jsfiddle.net/54v7r0ab/5/

var chart = c3.generate({
    data: { 
        x: 'x',
        columns: []
    },
     axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%H:%M:%S',
            }
        }
    },
    legend: {
        position: 'right'
    }
});
var chartObj = {
   "chart": chart,
   "redrawArgs": {},
   "truncThreshold": undefined
}
//"2013-01-01T00:00:01"
var date = 1463017666000;
var timeInc = 1000;
var value = 1;
var interval = setInterval(function () {
        var dataCols = [];
    date = date + timeInc;
    var minX = date - 10000;
    var maxX = date;
    var redrawArgs = chartObj.redrawArgs;
    if (!chartObj.truncThreshold) {
        chartObj.truncThreshold = maxX;
    } else if (minX > chartObj.truncThreshold) {
        redrawArgs.length = 1;
    } else {
        redrawArgs.length = 0;
    }
    chartObj.chart.axis.range({max: {x: maxX}, min: {x: minX}});
    value++;
    redrawArgs.duration = 0;
    if (value < 7) {
      dataCols.push(['x', date]);
      dataCols.push(['data 1', value]);
      redrawArgs.columns = dataCols;      
    } else {
        dataCols.push(['x', date]);
      dataCols.push(['data 1', value]);
      dataCols.push(['data 2', value*Math.random()])
      dataCols.push(['data 3', value/Math.random()]);
      dataCols.push(['data 4', value+Math.random()]);
      redrawArgs.columns = dataCols;
    }
    chartObj.chart.flow(redrawArgs);
}, 1000);

有一个C3的流api，它可以用更少的代码来满足您的要求，但令人恼火的是（尤其是在我写了大部分答案之后），它有一个错误，如果选项卡被隐藏，它不会删除点-https://github.com/c3js/c3/issues/1097

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2012-12-28', '2012-12-29', '2012-12-30', '2012-12-31'],
            ['data1', 100, 230, 300, 330],
            ['data2', 250, 190, 230, 200],
            ['data3', 120, 90, 130, 180],
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%m/%d',
            }
        }
    }
});
var date = new Date ("2013-01-01");
setInterval(function () {
    chart.flow({
        columns: [
            ['x', new Date (date)],
            ['data1', 200 + (Math.random() * 300)],
            ['data2', 200 + (Math.random() * 300)],
            ['data3', 200 + (Math.random() * 300)],
        ],
        duration: 750,
    });
    date.setDate(date.getDate() + 1);
}, 2000);

http://jsfiddle.net/54v7r0ab/7/

在这个错误被修复之前，我会接受你的答案，因为它不会出现同样的问题。

编辑：可能的修复。当使用流api的done函数时，新数据将停止添加到隐藏的选项卡中，从而避免了"堆积"问题。然而，只有当你不想在不看的时候不断添加数据时，这才有用：-），它不是实时图形的解决方案。

http://jsfiddle.net/54v7r0ab/10/

var date = new Date ("2013-01-01");
var pushNew = function () {
    chart.flow({
        columns: [
            ['x', new Date (date)],
            ['data1', 200 + (Math.random() * 300)],
            ['data2', 200 + (Math.random() * 300)],
            ['data3', 200 + (Math.random() * 300)],
        ],
        duration: 750,
        done: function () {
          date.setDate(date.getDate() + 1);
          window.setTimeout (pushNew, 1);
      }
    });
}
pushNew();
相关文章：