将实时数据绘制成折线图答案

【问题标题】：Plot real time data into line chart将实时数据绘制成折线图
【发布时间】：2015-06-04 09:22:14
【问题描述】：

我有一些实时收集的数据，我想绘制成折线图。

我想将最近 60 次调用中收到的数据绘制成折线图（不提取数据时暂停绘制），每个名称：值对获得 1 个图表（因此在这种情况下将有 6 个图表）。当然，我需要每秒或每次调用httpGet() 时更新图表。

从服务器获得响应（要绘制的数据）后，我不确定如何继续下一步......我正在寻找的结果几乎是“CPU 使用历史”风格。

这是我用于从聚合服务器收集数据的 JavaScript 文件：

//httpGet() adopted from SO/247483
function httpGet()
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "foo.com/sensordata", false );
    xmlHttp.send( null );
    console.log(xmlHttp.responseText);
    return xmlHttp.responseText;
}

var interval;

//this is called by a button in the html file
function start(btn)
{
    if(btn.value=="Start"){
        interval = setInterval(httpGet, 1000);
        btn.value="Stop";
    } else {
        btn.value="Start";
        clearInterval(interval);
    }
}

因此，单击“开始”按钮将开始每 1 秒发出 GET 数据请求。服务器以 JSON 格式返回数据，这是控制台输出的示例：

{
    "Time":"2015/06/04 18:35:39",
    "SensorA":{"Value1":0.34804,"Value2":-0.39175,"Value3":-0.61718},
    "SensorB":{"Value1":516,"Value2":1,"Value2":2103}
}

谢谢！

【问题讨论】：

您想要图表中的哪些值？请指定 x 和 y 轴映射

标签： javascript html plot

【解决方案1】：

我制作了使用 ZingChart 的this demo（请务必单击“开始供稿”按钮！）。在 get 请求的回调中，我循环遍历数据并将其放入 ZingChart 的正确格式，然后当它全部清理完毕后，我使用modify 方法设置values 中的values 属性scale-x，这需要以毫秒为单位的 Unix 时间值数组，以及用于更新图表中数据的 setseriesvalues 方法。

for(var i = 0; i < 6; i++){
    zingchart.exec('myChart','modify',{
        update:false,
        data:{
            "scale-x":{
                "values":dataObj.date
            }
        }
    });
    zingchart.exec('myChart','setseriesvalues',{
        update:false,
        graphid:i,
        values:[dataObj[Object.keys(dataObj)[(i + 1)]]]
    });
}
zingchart.exec('myChart','update');

由于我连续多次调用 modify 和 setseriesvalues，因此我将两者上的 update 选项设置为 false，这会将更改排队，将排队的所有内容推送到图表当update 被调用时。

（是的，我确实在这里伪造了数据——我在两个不同的 JSON 文件之间交替，但你应该明白这一点。）

【讨论】：