浮动图表丢失一些更新选项答案

【问题标题】：Flot chart loss some options on update浮动图表丢失一些更新选项
【发布时间】：2014-12-30 11:14:28
【问题描述】：

我正在尝试使用 flot 库创建交互式实时图表。它与 Flot 站点中的实时示例非常相似，但有一些附加选项。这是我的代码的一部分：

var bars = false;
var lines = true;
var steps = false;
var xAxisInterval = 5;
var xAxisUnit = "minute";
var plot = 0;


var dataChart = [
    {
        label : "Consumo",
        data : input1_data, //history
        threshold : {below : threshold},
        color : input1_color, //'#00B800',
        lines : {show : input1_show, fill : input1_fill}
    },
    {
        label : "Consumo Previsto",
        data : input2_data, //forecast data
        threshold : {below : threshold},
        //stack : null,
        color : input2_color,//'#66E066',
        lines : {show : input2_show, fill : input2_fill}
    }
];

var plotOptions = {
    lines:{
        show: lines,
        steps: steps
    },
    bars: {
        show: bars,
        barWidth: 0.6
    },
    yaxis:{ min:0, max: 65000 },
    xaxis: { mode : "time", tickSize : [ xAxisInterval, xAxisUnit ] },
    zoom: { interactive : gridZoom },
    pan: { interactive : gridPan },
    points: { show: showPoints },
    grid: { hoverable: gridHoverable, color: gridColor },
    legend: { backgroundColor:legendBackgroundColor, backgroundOpacity:legendBackgroundOpacity, position: legendPosition }
    };

    if (plot == 0) {
        plot = $.plot("#" + divId, dataChart, plotOptions);
    }
    else {
        jQuery.each(dataChart , function(index, value) {
            plot.setData([value.data]);
        });
        plot.setupGrid();
        plot.draw();
    }

如果我只使用代码行 $.plot("#"+divId, dataChart, plotOptions)，效果很好。

但为了提高性能，我尝试在 if/else 语句中使用代码，而不是在每次增量中构建一个全新的绘图。但是绘制的图表丢失了一些选项，例如系列颜色和图例，并使用网格选项（gridColor）中定义的颜色进行绘制，如下图所示。

这是一个错误还是我做错了什么？

【问题讨论】：

标签： charts real-time flot updating

【解决方案1】：

您将仅用数据块替换所有系列选项。此外，setData 替换了所有data in the chart，所以我认为在循环中多次调用它是不正确的（你只会得到最后一个系列）。

我通常遵循这种模式来替换只是数据：

var series = plot.getData();
for (var i = 0 i < dataChart.length; i++){
    series[i].data = dataChart[i].data;
}
plot.setData(series);
plot.setupGrid();
plot.draw();

【讨论】：