javascript — Точки с одинаковой датой размещаются в разных местах на оси X (ось X — это ось даты)
Эта проблема:
Точки с одинаковой датой размещаются в разных местах на оси 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,
Решение
Вы все еще должны сгруппировать свои данные, как я упоминал в моем последний ответ. Проблема, которую вы видите, заключается в том, что я имел в виду под другим странным поведением. Если вы не можете сгруппировать свои данные в бэкэнде, сделайте это в 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
}
});
В случае, если вы хотите проанализировать даты (и вы должны это сделать), вы должны установить dataDateFormat на верхнем уровне вызова makeChart и equalSpacing, minPeriod, parseDates внутри categoryAxis,
Демо с дополнительными фиктивными данными:
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
}
});html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#dashboard-chart {
width: 100%;
height: 100%;
}<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>Другие решения
Других решений пока нет …
detector