Question

问题： 我使用C3.js创建了一个折线图，每2秒更新一次。为了实现这一目标，我使用以下代码。

更新我注意到当我从一个标签交换到另一个标签时发生这种情况。让我们说图表在TAB1上，我换了TAB2 5分钟，当我回到TAB1时，我已经丢失了一些标签，你可以请参阅下面的屏幕截图，X轴上的时间也是5分钟后......

UPDATE2 这个问题几乎肯定与setInterval有关。

function drawChart1()
{
 var chart = c3.generate({
     bindto: '#chart11',
    //Size of the chart
    size: {
        height: 250,
        width: 952
    },
    data: { 
        x: 'x',
        columns: []
    },
    //Color of the lines
     color: {
        pattern: [ '#ff9896', '#9edae5']
    },
    axis: {
        x: {
            //show: false,
            label: 'Time',
            type: 'timeseries',
            tick: {
                format: '%H:%M:%S',
                  //format: '%H:%M',
            }
        },
        y: {
            //http://c3js.org/samples/axes_label_position.html
            label: 'Kbps'
        },
    },
    legend: {
        //position: 'right'
    }
});
var chartObj = {
   "chart": chart,
   "redrawArgs": {},
   "truncThreshold": undefined
}


var date = Date.now();
var timeInc = 2000;
//Update values every x seconds 
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}});
    redrawArgs.duration = 0;


    var TraficDown1 = 1 + Math.floor(Math.random() * 1000);
    var TraficUp1 =   1 + Math.floor(Math.random() * 1000);

    dataCols.push(['x', date]);
    dataCols.push(['Kbps UP', TraficUp1]);
    dataCols.push(['Kbps DOWN', TraficDown1])
    redrawArgs.columns = dataCols;

    chartObj.chart.flow(redrawArgs);
}, 2000);
}

有段时间，代码按预期工作：

问题是几分钟后我得到了这种奇怪的行为，其中x轴上缺少值。

有人可以给我一些提示吗？我正在使用c3.js和D3.js v3。

C3.js在x轴标签上丢失值

0 个答案: