我正在尝试使用 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 个系列的值。我想将其绘制为(键，值)。请建议我做错了什么。提前致谢!

请您参考如下方法:

完全公开，我是 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>