在时间序列ZingChart中，当实时使用appendseriesvalues时，xValue会引起问题

Question

我正在尝试使用ZingChart创建一个实时时间序列图。但我希望它是累加式的，所有的点都随着数据的增加而累加。所以我在每个ajax轮询中使用"appendseriesvalues"来附加数据，并将数据作为JSON对象作为(键，值)对传递。

我的代码如下:

     var chartData = {
        "show-progress":false,
        "gui":{
            "behaviors":[
                {
                    "id":"ZoomIn",
                    "enabled":"all"
                },
                {
                    "id":"ZoomOut",
                    "enabled":"all"
                },
                {
                    "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]],
                            })

            });
    },
     });
  }

如果我使用这段代码创建，它将key和value作为串联的2个值。我想把它画成(键，值)请告诉我哪里做错了。提前感谢!

Answer 1

完全公开，我是ZingChart团队的一员。

如果你还没有看到它，我们的网站上有一个实时饲料部分。为了不偏离你的问题，我将向你展示如何将API调用合并到ZingChart中。

我要做的第一个假设是，键是一个以毫秒为单位的时间戳数字，值是一个数字类型。我假设key是一个时间戳，因为您已经定义了转换对象并将最小值设置为时间戳。

"min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */

如果这不是有意的，请指定，但我将继续这个例子。假设输入的数据是正确的，那么唯一没有做的就是指定plot索引。根据我们的appendseriesvalues文档，如果只更新单个plot，则必须定义plotindex。我已经使用了您的大部分配置来创建一个图表，绘制[时间戳，值]对每秒钟使用API方法appendseriesvalues。

var chartData = {
  "show-progress":false,
  "gui":{
    "behaviors":[
      {
        "id":"ZoomIn",
        "enabled":"all"
      },
      {
        "id":"ZoomOut",
        "enabled":"all"
      },
      {
        "id":"ShowAll",
        "enabled":"all"
      }
    ]
  },
  "type":"line",
  //  "utc":true, /* 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",
    },
    "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: "myChart",
        data: chartData,
        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', 'appendseriesvalues', {    
    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>