Question

我正在尝试使用ZingChart创建实时时间序列图。但我希望它是累积的，其中所有点在数据追加时累积。所以我正在使用＆＃34; appendseriesvalues＆＃34;在每个ajax轮询中附加数据和m作为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。

我要做的第一个假设是密钥是时间戳号，以毫秒为单位，值是数字类型。我假设key是一个时间戳，因为你定义了转换对象并将min值设置为时间戳。

"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中，在实时使用appendseries值时，xValue会导致问题

1 个答案: