Как построить обновленную диаграмму с накоплением областей, используя C3, чтобы новые данные появлялись для прокрутки справа - PullRequest
Новая
       15

Как построить обновленную диаграмму с накоплением областей, используя C3, чтобы новые данные появлялись для прокрутки справа

0 голосов
/ 21 февраля 2020

Я пытаюсь использовать C3 для построения диаграммы с областями с накоплением, которая будет автоматически обновляться периодически, а при обновлении преобразования логическим способом, прокручивая точки влево относительно значений оси x.

Если вы go к примеру с областью стекирования c3 (https://c3js.org/samples/chart_area_stacked.html) и вставьте приведенный ниже код вместо примера по умолчанию, вы увидите эффект, который я вижу сейчас: 

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 1, 2, 3, 4, 5, 6],
            ['data1', 301, 350, 300, 0, 0, 120],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area'
        },
        groups: [['data1', 'data2']]
    }
});

setTimeout(function() {
    chart.load(
        {
            x: 'x',
            columns: [
                ['x', 2, 3, 4, 5, 6, 7],
                ['data1', 350, 300, 0, 0, 120, 140],
                ['data2', 100, 140, 200, 150, 50, 60]
            ],
            types: {
                data1: 'area',
                data2: 'area'
            },
            groups: [['data1', 'data2']]
        }
    );
}, 3000);

Я бы хотел, чтобы каждая точка данных скользила влево, чтобы показать, что старые данные упали с левой стороны диаграммы, а новые данные поступили с правой стороны. В настоящее время происходит то, что каждая точка данных сохраняет свою исходную позицию screen-x и переводит чисто вертикально, чтобы отразить значение y того, что было точкой данных справа.

Фактическая прокрутка (чтобы привести старые данные возвращаются в поле зрения) не представляет интереса.

...