ajax - 在时间序列 ZingChart 中，在实时使用附加序列值时，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]],
                            })


            });

    },
     });

  }

如果我使用此代码创建，它将键和值作为 2 个系列的值。我想将其绘制为(键，值)。请建议我做错了什么。提前致谢!

Answer 1

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

如果您还没有看过，我们确实有 realtime feed我们网站上的部分。为了继续讨论您的问题，我将向您展示如何将 API 调用合并到 ZingChart 中。

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

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

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

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>