데이터 플롯 업데이트

데이터 플롯 업데이트

좋아, 난 다음 코드를 가지고 있어.

    var element = document.getElementById(scope.changeid);

function getData(division,redraw) {
    var employeeData = [];
    if (!division) {
        $http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
            processData(response,redraw);
        });
    }
    else {
        $http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
            processData(response,redraw);
        })
    }

}

function processData(data,redraw) {
    var y = [],
        x1 = [],
        x2 = [];

    data.forEach(function (item) {
        y.push(item.user.profile.firstname);
        x1.push(item.current_level);
        x2.push(item.expected);
    });

    var charData = [{
            x: x1,
            y: y,
            type: 'bar',
            orientation: 'h',

            name: 'Nuværende'
        }, {
            x: x2,
            y: y,
            type: 'bar',
            orientation: 'h',

            name: 'Forventet'
        }],
        layout = {
            barmode: 'stack',
            legend: {
                traceorder: 'reversed',
                orientation: 'h'

            }
        };

    if(!redraw){
        Plotly.plot(element, charData, layout);
    }
    else
    {
        Plotly.redraw(element,charData,layout);
    }
}

scope.$watch('divisionId', function (newValue, oldValue) {
    if (newValue) {
        getData(newValue.id,true);
    }
}, true);

getData(null,false);

그러면 다음 차트가 생성됩니다.

보시는 바와 같이,watcher

            scope.$watch('divisionId', function (newValue, oldValue) {
            if (newValue) {
                getData(newValue.id,true);
            }
        }, true);

이제 이 트리거를 실행하면 차트가 갱신되고 호출됩니다.Plotly.redraw(element,charData,layout);

그러나 이렇게 해도 차트는 전혀 변경되지 않습니다.콘솔에 오류가 없는데 어떻게 해야 할지 잘 모르겠어요.

Plotly.redraw(gd)옳은 길입니다.
하지만 네가 전화했어Plotly.redraw잘못되어 있습니다.
올바른 방법은,data새로운 a가 아닌 오브젝트data물건.

var data = [ {
    x: ['VALUE 1'], // in reality I have more values... 
    y: [20], 
    type: 'bar'
}
]; 
Plotly.newPlot('PlotlyTest', data); function adjustValue1(value) {
    data[0]['y'][0] = value; 
    Plotly.redraw('PlotlyTest');
}

참고 자료: http://www.mzan.com/article/35946484-most-performant-way-to-update-graph-with-new-data-with-plotly.shtml

나는 그 질문에 대한 답을 찾았다.

견습생은 다음을 사용해야 했다.

 Plotly.newPlot(element,charData,layout);

대신redraw

플로틀리 커뮤니티의 주최자에 의하면(여기에 있는 첫 번째 답변 참조),Plotly.restyle보다 빠르다Plotly.redraw그리고.Plotly.newPlot.

링크에서 가져온 예:

var data = [{
    x: ['VALUE 1'], // in reality I have more values...
    y: [20],
    type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);

function adjustValue1(value)
{
    Plotly.restyle('PlotlyTest', 'y', [[value]]);
}

extendTraces 함수는 원하는 기능이어야 합니다.그래프에 데이터 점을 추가하고 다시 그릴 수 있습니다.redraw(@Honghe)와는 대조적으로.Wu Answer)는 extendTraces를 사용할 때 참조를 업데이트할 필요가 없습니다.

[확장 트레이스]이 함수는 Plotly.react와 유사한 성능을 가지며 Plotly.newPlot을 사용하여 전체 그림을 다시 그리는 것보다 빠릅니다.

https://plot.ly/javascript/plotlyjs-function-reference/ #plotly extendtraces

사용 예

// initialise some data beforehand
var y = [];
for (var i = 0; i < 20; i ++) {
    y[i] = Math.random();
}

var trace = {
    // x: x,
    y: y,
    type: 'bar',
  };
var data = [trace];
// create the plotly graph
Plotly.newPlot('graph', data);

setInterval(function() {
  // add data to the trace via function call
  Plotly.extendTraces('graph', { y: [[getData()]] }, [0]);
  // y.push(getData()); Plotly.redraw('graph'); //similar effect
}, 400);

function getData() {
     return Math.random();
}

언급URL : https://stackoverflow.com/questions/32116368/plotly-update-data