Flot图表丢失更新中的一些选项

Question

我正尝试使用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，数据图表，plotOptions），效果很好。

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

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

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