ajax – 在时间序列ZingChart中,在实时使用appendseriesvalues时,xValue导致问题

我正在尝试使用ZingChart创建实时时间序列图.但我希望它是累积的,其中所有点在数据追加时累积.所以我在每个ajax轮询中使用“appendseriesvalues”来追加数据,并将数据作为 JSON对象传递给(key,value)对.

我的代码如下：

var chartData = {
        "show-progress":false,"gui":{
            "behaviors":[
                {
                    "id":"ZoomIn","enabled":"all"
                },{
                    "id":"ZoomOut",{
                    "id":"ShowAll","enabled":"all"
                }
            ]
        },"type":"line",//  "utc":true,/* Force UTC time. */
   // "timezone": -5,"plotarea": {
      "adjust-layout":true /* For automatic margin adjustment. */
    },"scale-x":{
        "values": [],"label":{ /* Add a scale title with a label object. */
        "text":"Above is an example of a time-series scale",},"min-value":1420070400000,/* Unix timestamp for Jan 1,2015. */
      "step":"second","transform":{ /* Converts your Unix timestamp to a human readable format. */
        "type":"date",/* Set your transform type to "date". */
        "all":"%h:%i:%s" /* Specify your date/time format,using tokens. */
      },"line-color":"none","tick":{
          "visible":false
      },"zooming":1,"item":{
          "font-color":"#000","visible":true
      },//  "max-labels":10000,"itemsOverlap": true
    },"scale-y":{
        "zooming":1,"items-overlap": true
    },"series":[
        {
            "values":[]
        }
    ],};

window.onload = function() {
    zingchart.render({
        id: "chartDiv",data: chartData,height: 600,width: "100%"
    });
};

setInterval(flashText,1000);

function flashText() {
     $.ajax({
         type: "POST",dataType: "json",headers: {
             Accept: "application/json","Access-Control-Allow-Origin": "*"
         },url: "TestServlet2",success:function(data) {                   
            $.each(data,function(key,value) {
                         zingchart.exec('chartDiv','appendseriesvalues',{
                             values: [[key,value]],})


            });

    },});

  }

如果我使用此代码创建,它将键和值作为2个串联值.我想将其绘制为(键,值).请建议我做错了什么.提前致谢！

完全披露,我是ZingChart团队的成员.

如果您还没有看到它,我们的网站上有一个 realtime feed部分.为了保留您的问题主题,我将向您展示如何将API调用合并到ZingChart中.

我要做的第一个假设是密钥是时间戳号,以毫秒为单位,值是数字类型.我假设key是一个时间戳,因为你定义了转换对象并将min值设置为时间戳.

"min-value":1420070400000,2015. */

如果不是这样,请说明,但我将继续这个例子.假设您输入的数据是正确的,您唯一没有做的就是指定绘图索引.根据我们的appendseriesvalues文档,如果仅更新单个图,则必须定义plotindex.我已经使用了大部分配置来创建一个图表,该图表使用API方法appendseriesvalues每秒绘制一个[timestamp,value]对.

var chartData = {
  "show-progress":false,"gui":{
    "behaviors":[
      {
        "id":"ZoomIn","enabled":"all"
      },{
        "id":"ZoomOut",{
        "id":"ShowAll","enabled":"all"
      }
    ]
  },/* Force UTC time. */
  // "timezone": -5,"plotarea": {
  "adjust-layout":true,/* For automatic margin adjustment. */
  "margin-right":50
  },"scale-x":{
    "values": [],"label":{ /* Add a scale title with a label object. */
      "text":"Above is an example of a time-series scale",2015. */
    "step":"second","transform":{ /* Converts your Unix timestamp to a human readable format. */
      "type":"date",/* Set your transform type to "date". */
      "all":"%h:%i:%s" /* Specify your date/time format,using tokens. */
    },"tick":{
      "visible":false
    },"item":{
      "font-color":"#000","visible":true
    },"itemsOverlap": true
  },"scale-y":{
    "zooming":1,"items-overlap": true
  },"series":[
    {
      "values":[]
    }
  ]
};
window.onload = function() {
    zingchart.render({
        id: "myChart",height: 400,width: "100%"
    });
};

// variable for incrementing time
var increment = 0;

// Every second add a new datapoint
setInterval(function() {
  var data = [];
  for (var i = 0; i < 1000; i++) {
    data.push(Math.random() * 25 + i);
  }
  
  zingchart.exec('myChart',{    
    plotindex:0,// The index of the plot if only appending the data on a single plot. 
    values: [[1420070400000 + increment,data]]
  });
  
  increment += 100;
},1000);

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

ajax – 在时间序列ZingChart中,在实时使用appendseriesvalues时,xValue导致问题

相关文章