我正在尝试使用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>