Plotly更新数据

Question

好了，所以我有以下代码：

    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);

它创建如下图：

现在，你可以看到我添加了一个qazxsw POI

watcher

现在，当我触发这个应该更新图表，并呼吁

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

然而，当它这样做，图表不会发生任何变化。没有错误在控制台，所以我不太清楚该怎么做？

Answer 1

Plotly.redraw(element,charData,layout);才是正道。 但是，你不正确调用Plotly.redraw(gd)。 正确的做法是更新Plotly.redraw对象，而不是新的一个data对象。

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');
}

Answer 2

我找到了问题的答案。

显然，我需要使用：

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

而不是 Plotly.newPlot(element,charData,layout);

Answer 3

根据Plotly社区版主（见第一个答案redraw），here比Plotly.restyle和Plotly.redraw更快。

例如，从链路采取：

Plotly.newPlot

Answer 4

该extendTraces功能应该是你的目标是什么。它可以添加的数据点到你的图形，并重绘。相比之下重绘（@ Honghe.Wu应答），则不需要使用extendTraces何时更新的参考。

[extendTraces]该功能具有相当的性能Plotly.react，比重绘与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]]);
}

用法示例

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