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

【问题标题】：Points which has the same date are placed to the different places at X-axis (X-axis is a date axis)具有相同日期的点被放置在 X 轴的不同位置（X 轴为日期轴）
【发布时间】：2018-02-03 11:51:58
【问题描述】：

问题：

具有相同日期的点被放置在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 php amcharts


    【解决方案1】：

    您仍然需要按照我在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 并在 categoryAxis 内设置 equalSpacing、minPeriod、parseDates。

    带有额外虚拟数据的演示：

    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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-13
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode