在时间序列 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]],
                            })


            });

    },
     });

  }

如果我使用此代码创建，它将键和值作为 series.I 中的 2 个值，想要将其绘制为（键，值）。请建议我做错了什么。提前致谢！

Answer 1

坦白说，我是 ZingChart 团队的一员。

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

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

"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>

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

In timeseries ZingChart, while using appendseriesvalues in realtime, xValue causing issue

ajax

charts

zingchart