具有相同日期的点放置在X轴的不同位置（X轴是日期轴）

时间：2018-02-03 11:51:59

标签： javascript php amcharts

问题：

具有相同日期的点被放置在X轴的不同位置（X轴是日期轴）。

http://icecream.me/b8388ef9e8d80e3a55dc546cd61187d9

以下是AmCharts设置： 

                            AmCharts.makeChart("dashboard-chart", {
                                "type": "serial",
                                "theme": "light",
                                "equalSpacing": true,
                                "dataProvider": chartData,
                                "valueAxes": valueAxes,
                                "graphs": graphs,
                                "categoryField": "captured_datetime",
                                'chartCursor': {
                                    'cursorPosition': 'mouse',
                                    'cursorColor': '#ffa500',
                                    "valueLineBalloonEnabled": true,
                                    "valueLineEnabled": true,
                                },
                                "categoryAxis": {
                                    "gridPosition": "middle",
                                    "labelRotation": 75,
                                    "minorGridEnabled": true

                                },
                                "responsive": {
                                    "enabled": true
                                }
                            });

传入的数据如下所示： 

[  
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"TM",
      "captured_datetime":"2018-02-01 19:31:33",
      "valueTM1680":"91.1"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"HU",
      "captured_datetime":"2018-02-01 19:31:33",
      "valueHU1680":"72.6"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"TM",
      "captured_datetime":"2018-02-01 19:33:13",
      "valueTM1680":"91.1"
   },
   {  
      "node_id":"1680",
      "node_name":"Internal",
      "nd":"1",
      "sensor_type":"HU",
      "captured_datetime":"2018-02-01 19:33:13",
      "valueHU1680":"72.6"
   }
]

图例： 

graphs.push({
                                            "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type]]<br>  Collecting date: [[captured_datetime]] <br>",
                                            "bullet": "round",
                                            "lineColor": "#000000",
                                            "bulletSize": 3,
                                            "fillAlphas": types[i].indexOf("TM") >= 0 ? 1 : 0,
                                            "type": types[i].indexOf("TM") >= 0 ? "column" : "smoothedLine",
                                            "labelPosition": "right",
                                            "valueField": "value" + types[i],
                                            "fixedColumnWidth": 10
                                        })

尝试使用带有以下参数的parseDates（但它没有帮助）： 

 "minPeriod":"ss",
"parseDates":true

在图表中添加了以下设置（也没有帮助）： 

"dataDateFormat": "YYYY-MM-DD HH:NN:SS", "equalSpacing": true,

1 个答案:

答案 0 :(得分：0)

您仍然必须按我在last answer中提到的那样对数据进行分组。你看到的问题是我的其他奇怪行为。如果您无法在后端对数据进行分组，请使用JavaScript进行分组。您还需要确保日期按升序排序：

// data remap:
var datetime_hash = {};
var types = {};
data.forEach(function(item, idx) {
    if (!datetime_hash.hasOwnProperty(item.captured_datetime)) {
        datetime_hash[item.captured_datetime] = {};
    }
    var suffix = item.sensor_type + item.node_id;
    types[suffix] = 1;
    datetime_hash[item.captured_datetime]["sensor_type" + suffix] = item.sensor_type;
    datetime_hash[item.captured_datetime]["node_name"] = item.node_name;
    datetime_hash[item.captured_datetime]["node_id"] = item.node_id;
    datetime_hash[item.captured_datetime]["nd"] = item.nd;
    datetime_hash[item.captured_datetime]["value" + suffix] = item["value" + suffix];
    datetime_hash[item.captured_datetime]["captured_datetime"] = item.captured_datetime;
})
//sort/remap hash data into an array
var chartData = Object.keys(datetime_hash).sort(function(lhs, rhs) {
  //ensure the dates are sorted in ascending order
  var lhsDate = AmCharts.stringToDate(lhs, "YYYY-MM-DD JJ:NN:SS");
  var rhsDate = AmCharts.stringToDate(rhs, "YYYY-MM-DD JJ:NN:SS");
  return lhsDate - rhsDate;
}).map(function(datetime) {
  return datetime_hash[datetime];
});

// updated graph creation code:
types = Object.keys(types);
var graphs = types.map(function(type) {
    return {
            "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type" + type + "]]<br>  Collecting date: [[captured_datetime]] <br>",
            "bullet": "round",
            "lineColor": "#000000",
            "bulletSize": 3,
            "fillAlphas": type.indexOf("TM") >= 0 ? 1 : 0,
            "type": type.indexOf("TM") >= 0 ? "column" : "smoothedLine",
            "labelPosition": "right",
            "valueField": "value" + type,
            "fixedColumnWidth": 10
    }
});

如果你想解析日期（你应该），你必须在makeChart调用的顶层设置dataDateFormat，在{}}内设置equalSpacing，minPeriod，parseDates categoryAxis。

使用其他虚拟数据进行演示：

＆＃13;
＆＃13; 
var data = [{
    "valueTM1680": 24.9,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:00:00"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 39.9,
    "captured_datetime": "2018-01-01 00:00:00"
  },
  {
    "valueTM1680": 22.3,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:00:05"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 37.8,
    "captured_datetime": "2018-01-01 00:00:05"
  },
  {
    "valueTM1680": 20.1,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:00:24"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 36.0,
    "captured_datetime": "2018-01-01 00:00:24"
  },
  {
    "valueTM1680": 24.8,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:00:43"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 38.8,
    "captured_datetime": "2018-01-01 00:00:43"
  },
  {
    "valueTM1680": 24.7,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:00:57"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 38.8,
    "captured_datetime": "2018-01-01 00:00:57"
  },
  {
    "valueTM1680": 24.7,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:01:07"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 37.9,
    "captured_datetime": "2018-01-01 00:01:07"
  },
  {
    "valueTM1680": 24.6,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:01:21"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 37.3,
    "captured_datetime": "2018-01-01 00:01:21"
  },
  {
    "valueTM1680": 23.8,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:01:34"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 36.4,
    "captured_datetime": "2018-01-01 00:01:34"
  },
  {
    "valueTM1680": 20.3,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:01:47"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 37.9,
    "captured_datetime": "2018-01-01 00:01:47"
  },
  {
    "valueTM1680": 21.8,
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "TM",
    "node_id": 1680,
    "captured_datetime": "2018-01-01 00:02:01"
  },
  {
    "nd": 1,
    "node_name": "Internal",
    "sensor_type": "HU",
    "node_id": 1680,
    "valueHU1680": 37.3,
    "captured_datetime": "2018-01-01 00:02:01"
  }
]



//remap data
var datetime_hash = {};
var types = {};

data.forEach(function(item, idx) {
  if (!datetime_hash.hasOwnProperty(item.captured_datetime)) {
    datetime_hash[item.captured_datetime] = {};
  }
  var suffix = item.sensor_type + item.node_id;
  types[suffix] = 1;
  datetime_hash[item.captured_datetime]["sensor_type" + suffix] = item.sensor_type;
  datetime_hash[item.captured_datetime]["node_name"] = item.node_name;
  datetime_hash[item.captured_datetime]["node_id"] = item.node_id;
  datetime_hash[item.captured_datetime]["nd"] = item.nd;
  datetime_hash[item.captured_datetime]["value" + suffix] = item["value" + suffix];
  datetime_hash[item.captured_datetime]["captured_datetime"] = item.captured_datetime;
});
//sort/remap hash data into an array
var chartData = Object.keys(datetime_hash).sort(function(lhs, rhs) {
  //ensure the dates are sorted in ascending order
  var lhsDate = AmCharts.stringToDate(lhs, "YYYY-MM-DD JJ:NN:SS");
  var rhsDate = AmCharts.stringToDate(rhs, "YYYY-MM-DD JJ:NN:SS");
  return lhsDate - rhsDate;
}).map(function(datetime) {
  return datetime_hash[datetime];
});

//create graphs
types = Object.keys(types);
var graphs = types.map(function(type) {
  return {
    "balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type" + type + "]]<br>  Collecting date: [[captured_datetime]] <br>",
    "bullet": "round",
    //"lineColor": "#000000",
    "bulletSize": 3,
    "fillAlphas": type.indexOf("TM") >= 0 ? 1 : 0,
    "type": type.indexOf("TM") >= 0 ? "column" : "smoothedLine",
    "labelPosition": "right",
    "valueField": "value" + type,
    "fixedColumnWidth": 10
  }
});


AmCharts.makeChart("dashboard-chart", {
  "type": "serial",
  "theme": "light",
  //"equalSpacing": true, this is a categoryAxis property.
  "dataProvider": chartData,
  //"valueAxes": valueAxes,
  "graphs": graphs,
  "categoryField": "captured_datetime",
  'chartCursor': {
    'cursorPosition': 'mouse',
    'cursorColor': '#ffa500',
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
  },
  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
  "categoryAxis": {
    //"gridPosition": "middle",
    "labelRotation": 75,
    "minorGridEnabled": true,
    "parseDates": true,
    "minPeriod": "ss",
    //customize axis:
    "markPeriodChange": false,
    "dateFormats": [{
      "period": "fff",
      "format": "JJ:NN:SS"
    }, {
      "period": "ss",
      "format": "YYYY-MM-DD\nJJ:NN:SS"
    }, {
      "period": "mm",
      "format": "JJ:NN"
    }, {
      "period": "hh",
      "format": "JJ:NN"
    }, {
      "period": "DD",
      "format": "MMM DD"
    }, {
      "period": "WW",
      "format": "MMM DD"
    }, {
      "period": "MM",
      "format": "MMM"
    }, {
      "period": "YYYY",
      "format": "YYYY"
    }]

  },
  "responsive": {
    "enabled": true
  }
});
＆＃13; 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#dashboard-chart {
  width: 100%;
  height: 100%;
}
＆＃13; 
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="dashboard-chart"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题