Question

我正在使用Highchart在电流表上显示我的实时活动，我有4个参数，例如三相电压，安培，单相电压和总功率 在初始化图表时，我有一个ajax请求来获取最后20条记录，并将它们全部添加到下表中，如下所示

var dataset1 = [];
var dataset2 = [];
var dataset3 = [];
var dataset4 = [];  

var baseUrl = $('#base').val();
$.ajax({
        url: baseUrl+"dashboard/voltampGraph",
        type: 'POST',
        async: false,
        dataType: "json",
        success: function (data) {
            console.log(data);
          for (var i = 0; i < data.length; i++) {
          //console.log(data[i]._source.created);
          dataset1.push([data[i]._source.created,data[i]._source.tpv]);
          dataset2.push([data[i]._source.created,data[i]._source.tc]);
          dataset3.push([data[i]._source.created,data[i]._source.tv]);
          dataset4.push([data[i]._source.created,data[i]._source.tp]);
         }

        }
    });


var myChart = Highcharts.chart("linechart", {
  chart: {
    type: "spline"
  },
  title: {
    text: "Consumption"
  },
  yAxis: {
    title: {
      text: "Values",
    }
  },
     xAxis: {
      type: 'datetime',
      tickPixelInterval: 150
    },
  series: [
    {
      name: "Three phase voltage",
      data: dataset1
    },
    {
      name: "Amp",
      data: dataset2,
    },
    {
      name: "Single Phase voltage",
      data: dataset3,
    },
    {
      name: "Total Power",
      data: dataset4,
    }
  ]
});

此图没有问题，对于我们加载的数据来说看起来不错，但是我必须使用 $。post 来每5秒更新一次来自服务器的实时数据。 >

 setInterval(function() {
$.post(baseUrl+"dashboard/voltampMsg",function(data) {
    if(data.status=="success"){
        myChart.series[0].addPoint([data.data.created,data.data.tpv], true, true);
        myChart.series[1].addPoint([data.data.created,data.data.tc], true, true);
        myChart.series[2].addPoint([data.data.created,data.data.tv], true, true);
        myChart.series[3].addPoint([data.data.created,data.data.tp], true, true);
    }
},"json");
myChart.redraw();
}, 5000);

当我们将数据加载到图表时，这也很好用，但是当我们看到可视化时，每个参数有2个样条线，这意味着我们先前加载的旧参数在图表中也可见。请参考附件图片

我加载第一组数据的原因是，如果我分配了空数据集，那么我将无法初始化没有任何数据的图表，那么下一组数据就不会动态更新

有没有办法在没有旧数据集的情况下将实时数据更新为高位图表？ 初始化数据集：

TPV :1531834002399 413.65
TC :1531834002399 0.279667
TV :1531834002399 227.8767
TP :1531834002399 43.671
TPV :1531833983914 413.6233
TC :1531833983914 0.279
TV :1531833983914 227.8367
TP :1531833983914 43.67167
TPV :1531833968099 413.62
TC :1531833968099 0.279
TV :1531833968099 227.75
TP :1531833968099 43.672
TPV :1531833952811 413.54
TC :1531833952811 0.277667
TV :1531833952811 227.78
TP :1531833952811 43.67134
TPV :1531833933943 413.1267
TC :1531833933943 0.283667
TV :1531833933943 227.5567
TP :1531833933943 43.671
TPV :1531833916201 414.9167
TC :1531833916201 0.288333
TV :1531833916201 228.57
TP :1531833916201 43.67267
TPV :1531833880529 412.6566
TC :1531833880529 0.272333
TV :1531833880529 227.2567
TP :1531833880529 43.673
TPV :1531833859568 412.6566
TC :1531833859568 0.272333
TV :1531833859568 227.2567
TP :1531833859568 43.673
TPV :1531833844129 412.5934
TC :1531833844129 0.271
TV :1531833844129 227.1733
TP :1531833844129 43.673
TPV :1531833825521 412.6167
TC :1531833825521 0.287667
TV :1531833825521 227.1833
TP :1531833825521 43.67033

setintervel之后

TPV :1531834002399 413.65
TC :1531834002399 0.279667
TV :1531834002399 227.8767
TP :1531834002399 43.671

HighChart样条实时更新数据并出现旧数据

0 个答案: