Plotly 使用 websocket 的折线图

Question

我正在使用 web 插座做的这张图真的需要帮助。 所以我能够获得一个俱乐部（利物浦）的数据，但我也想获得另一家具乐部的数据，比如曼城，以便将它们进行比较。

let data = JSON.parse(msg.data);

            let clubNames = ["Liverpool FC", "Manchester City FC"];
            for(let club of clubNames){
                let trace = {
                    x: data[club].actual.x,
                    y: data[club].actual.y,
                    mode: 'line',
                    name: club,
                    marker: {
                        color: 'rgb(219, 64, 82)',
                        size: 10
                    }
                };      

                let layout = {
                    title: club,
                    xaxis: {
                        title: 'Match played Dates'
                    },
                    yaxis: {
                        title: 'Goals Scored'
                    }
                };



                //draw graph
                Plotly.newPlot(club, [trace], layout);
            }
        }

这是我使用 websocket 的服务器消息，所以我基本上是从这里获取数据：

Server message: {"Liverpool FC":{"actual":{"x":[1546545600000,1547305200000,1547910000000,1548878400000,1549310400000,1549724400000,1550606400000,1551017100000,1551297600000,1551629700000,1552219200000,1552507200000,1552832100000,1554046200000,1554490800000,1554836400000,1555255800000,1555527600000,1555858800000,1556305200000,1556737200000,1556995500000,1557255600000,1557669600000,1559415600000,1565377200000,1566050400000,1566664200000,1567269000000,1568460600000,1568746800000,1569166200000,1569670200000,1570042800000,1570284000000,1571585400000,1571857200000,1572193800000,1572706800000,1572984000000,1573403400000,1574521200000,1574884800000,1575126000000,1575490500000,1575730800000,1576000500000,1576326600000,1577390400000,1577637000000,1577995200000,1578763800000,1579451400000,1579809600000,1580327100000,1580569200000],"y":[1,1,4,1,1,3,0,0,5,0,4,3,2,2,3,2,2,4,2,5,0,3,4,2,2,4,2,3,3,3,0,2,1,4,2,1,4,2,2,2,3,2,1,2,5,3,2,2,4,1,2,1,2,2,2,4]},"sentiment":{}},

"Manchester City FC":{"actual":{"x":[1546545600000,1547496000000,1547991000000,1548792000000,1549211400000,1549482300000,1549814400000,1550692800000,1551297600000,1551538800000,1552152600000,1552420800000,1553949000000,1554317100000,1554836400000,1555247100000,1555527600000,1555759800000,1556132400000,1556456700000,1557169200000,1557669600000,1565436600000,1566059400000,1566738000000,1567260000000,1568478600000,1568833200000,1569074400000,1569688200000,1569956400000,1570366800000,1571502600000,1571770800000,1572089400000,1572706800000,1573070400000,1573403400000,1574530200000,1574798400000,1575117000000,1575404100000,1575739800000,1576086900000,1576427400000,1576949400000,1577475900000,1577642400000,1577899800000,1578846600000,1579359600000,1579635000000,1580661000000],"y":[2,3,3,1,3,2,6,3,1,1,3,7,2,2,0,3,4,1,2,1,1,4,5,2,3,4,2,3,8,3,2,0,2,5,3,2,1,1,2,1,2,4,1,4,3,3,2,2,2,6,2,1,0]},"sentiment":{}}

Answer 1

您正在覆盖变量跟踪，您应该使用数组来存储跟踪。

let traces = [];
for(let club of clubNames){
  traces.push({
    x: ...,
    ...
  });
}

Plotly.newPlot(club, traces, layout);