Question

我正在尝试使用amcharts从我的服务器显示一些数据。但是，API格式似乎不直接与amCharts兼容。我相信我需要先使用postProcess函数来管理数据。但由于缺少错误信息和我在javascript方面缺乏经验，我感到很茫然。

按照他们的指导，这是我得到的地方：

＆＃13;

var chart = AmCharts.makeChart( "$CHART$", {
  "type": "serial",
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
"dataLoader": {
    "format": "json",
    "postProcess": function( data, config, chart ) {
    var newData = [];
    for ( var i = 0; i < data.rows.length; i++ ) {
      var dataPoint = {};
      dataPoint= data["items"];
      
      newData.push( dataPoint );
    }
    return newData;
  },
    "showCurtain": true,
    "showErrors": true,
    "url": "*url*",
    "headers": [{
    "key": "Accept",
    "value": "application/javascript, application/json",
    "Authorization":"Basic *encodedpassword*"
  }]
    
  },  "categoryField": "timestamp",
  "graphs": [  {
    "valueField": "value",
    "bullet": "round",
    "bulletBorderColor": "#6698FF",
    "bulletBorderThickness": 2,
    "bulletAlpha":0,
    "bulletSize":0,
    "title":"ServerData",
    "lineThickness": 2,
    "lineColor": "#6698FF",
    "lineAlpha": 0.5,
    "fillAlphas": 0.8,
    "fillColors":"#6698FF",
  } ],
  "valueAxes": [{
        "axisAlpha": 0,
        "dashLength": 5,
        "gridCount": 10,
        "position": "left",
    	"unit": "V",
    }],
  "categoryAxis": {
    "minPeriod": "mm",
    "labelsEnabled": false
  },
  "chartCursor": {
    "oneBalloonOnly": true,
    "zoomable":true
  },
} );

＆＃13;

服务器API的示例输出如下：

{"href":"*url/value*","offset":0,"limit":20,"items":[
{"stateVarId":"value1","timestamp":1523939135978,"value":887.0},
{"stateVarId":"value1","timestamp":1523935535977,"value":887.0},{"stateVarId":"value1","timestamp":1523845535955,"value":887.0}]}

为了允许amCharts使用这些值，它不应该在＆＃34; items＆＃34;：[...]部分内。

因此，postProcess函数应该查看JSON格式并返回＆＃34; items＆＃34;的内容。

如果需要进一步的信息，请告诉我。我会尝试填写任何遗漏的细节。

感谢。

Answer 1

当你正在创建一个数组数组而不是一个扁平数组时，你的postProcess方法不能正确地推送项目数组。以下是数据中每一行的循环内容：

  var dataPoint = {};
  dataPoint= data["items"]; //dataPoint is now an array

  //this pushses the array as an element of newData, resulting in
  //[ [/*first items array*], [/*second items array*], ...]
  newData.push( dataPoint );

您想要的是循环遍历data["items"]数组并将每个元素分别推送到newData数组中，或使用Array.concat为您执行此操作：

  //concatenates the existing newData array
  //with the next data["items"] array
  newData = newData.concat(data["items"]);

附注 - 基于日期/时间戳的数据需要在ascending order if you're using parseDates中，这在您的配置中是遗漏的（minPeriod没有它就无法工作）。您的示例API响应将您的项目按降序时间戳顺序排序，因此请确保在postData中将其返回之前对其进行排序。

Answer 2

与amCharts讨论过，这是官方的答案：

SET group_concat_max_len = 2048;
call MyProcedure('random_test_uuid',(
    SELECT CAST(GROUP_CONCAT(receiver_id SEPARATOR ',') AS CHAR)  AS receiver_ids FROM receiver
    WHERE user_id LIKE (SELECT user_id FROM user WHERE user_name LIKE 'myName') 
    GROUP BY receiver_id ),
'2017-09-24 23:44:32');

它之所以不适合我的真正原因是由于我网站上的CORS错误。

感谢所有观看我的问题的人。 = d

amCharts后处理以检索图

2 个答案: