堆棧內存溢出
  簡體   English   中英

日期相同的點在X軸上放置在不同的位置（X軸是日期軸）

[英]Points which has the same date are placed to the different places at X-axis (X-axis is a date axis)

 原文  2018-02-03 11:51:58  4   1    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 個解決方案

解決方案1
 0  2018-02-03 13:15:51

正如我在上一個答案中提到的那樣，您仍然必須對數據進行分組。 您看到的問題是我所說的其他奇怪行為。 如果您無法在后端對數據進行分組，請使用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調用的頂層設置minPeriod ， parseDates在categoryAxis內設置minPeriod ， parseDates和equalSpacing 。

帶有其他虛擬數據的演示： 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 x軸上的日期不正確 X軸缺少日期 HighCharts雙X軸，帶有百分比和日期 高圖日期未在X軸上正確顯示 日期格式在X軸文本上的應用 如何在 x 軸上使用日期 object 如何在高庫存的x軸上顯示日期？ 如何在jqchart的X軸上添加日期 Dygraph X軸日期和時間 dygraph x軸日期不顯示
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM