AmCharts序列图日期订购问题

时间：2017-06-09 19:01:13

标签： javascript html amcharts

我有4个不同的数据集data1, data2, data3, data4，每个数据集包含不同的日期，因此日期不按顺序排列，因此图表不会根据日期显示

这是我的代码

＆＃13;
＆＃13; 
        AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "addClassNames": true,
            "startDuration": 0.4,
            "theme": "light",
            "dataDateFormat": "YYYY-MM-DD",
            "trendLines": [],
            "applyGapValue": 0,
            "graphs": [{
                "bullet": "round",
                "type": "smoothedLine",
                "valueField": "data2",
            }, {
                "bullet": "round",
                "type": "smoothedLine",
                "valueField": "data1",
            }, {
                "bullet": "round",
                "type": "smoothedLine",
                "valueField": "data3",
            }, {
                "bullet": "round",
                "type": "smoothedLine",
                "valueField": "data4",
            }],
            "guides": [],
            "valueAxes": [{
                "id": "ValueAxis-1",
            }],
            "categoryField": "date",
            "categoryAxis": {
                "parseDates": true,
                "equalSpacing": true,
                "minorGridEnabled": true,
                "gridPosition": "start",
            },
            "allLabels": [],
            "balloon": {
                "borderThickness": 3,
                "horizontalPadding": 17,
                "offsetX": 50,
                "offsetY": 8
            },
            "chartCursor": {
                "cursorAlpha": 0,
                "cursorPosition": "mouse",
                "graphBulletSize": 1,
                "zoomable": false
            },
            "legend": {
                "enabled": true,
                "useGraphSettings": true,
                "position": "top",
            },

            "dataProvider": [




                {
                    "date": "2017-06-02",
                    "data1": 202,
                }, {
                    "date": "2017-06-04",
                    "data1": 420,
                }, {
                    "date": "2017-06-05",
                    "data1": 910,
                }, {
                    "date": "2017-06-07",
                    "data1": 60,
                },


                {
                    "date": "2017-06-02",
                    "data2": 110,
                }, {
                    "date": "2017-06-04",
                    "data2": 920,
                }, {
                    "date": "2017-06-05",
                    "data2": 320,
                }, {
                    "date": "2017-06-07",
                    "data2": 355,
                },

                {
                    "date": "2017-06-02",
                    "data3": 80,
                }, {
                    "date": "2017-06-04",
                    "data3": 350,
                }, {
                    "date": "2017-06-05",
                    "data3": 710,
                }, {
                    "date": "2017-06-07",
                    "data3": 710,
                },
                {
                    "date": "2017-06-02",
                    "data4": 580,
                }, {
                    "date": "2017-06-04",
                    "data4": 510,
                }, {
                    "date": "2017-06-05",
                    "data4": 702,
                }, {
                    "date": "2017-05-07",
                    "data4": 940,
                }, {
                    "date": "2017-06-09",
                    "data4": 940,
                },
            ]
        });
＆＃13; 
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	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="chartdiv"></div>
＆＃13;
＆＃13;
＆＃13;

在输出中我希望图表按照订购日期显示，谢谢

2 个答案:

答案 0 :(得分：1)

您可以按如下方式对数据进行排序：

chartData.sort(function(a, b) {
    return new Date(b.date) - new Date(a.date);
});

我们假设您在将其传递给dataProvider属性之前执行此操作。

答案 1 :(得分：1)

虽然您必须按照前面提到的按日期对数据进行排序，但对AmCharts来说还不够。您还需要按日期对数据进行分组，否则您的图表将无法呈现或行为正确，即数组元素的日期为＆＃34; 2017-06-02＆＃34;需要有＆＃34; data1＆＃34;，＆＃34; data2＆＃34;，＆＃34; data3＆＃34;，＆＃34; data4＆＃34;同一元素中的属性。

以下是对其进行分组的一种方法（假设您的数据位于名为chartData的变量中）：

var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
  if (!dataMap[dataItem.date]) {
    dataMap[dataItem.date] = {};
  }
  Object.keys(dataItem).forEach(function(key) { //assign keys to map
    if (key !== "date") {
      dataMap[dataItem.date][key] = dataItem[key];
      dataMap[dataItem.date].date = dataItem.date;
    }
  });
});

//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
  return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
  newChartData.push(dataMap[date]);
});

演示：

＆＃13;
＆＃13; 
var chartData = [
  {
    "date": "2017-06-02",
    "data1": 202,
  }, {
    "date": "2017-06-04",
    "data1": 420,
  }, {
    "date": "2017-06-05",
    "data1": 910,
  }, {
    "date": "2017-06-07",
    "data1": 60,
  },
  {
    "date": "2017-06-02",
    "data2": 110,
  }, {
    "date": "2017-06-04",
    "data2": 920,
  }, {
    "date": "2017-06-05",
    "data2": 320,
  }, {
    "date": "2017-06-07",
    "data2": 355,
  },

  {
    "date": "2017-06-02",
    "data3": 80,
  }, {
    "date": "2017-06-04",
    "data3": 350,
  }, {
    "date": "2017-06-05",
    "data3": 710,
  }, {
    "date": "2017-06-07",
    "data3": 710,
  },
  {
    "date": "2017-06-02",
    "data4": 580,
  }, {
    "date": "2017-06-04",
    "data4": 510,
  }, {
    "date": "2017-06-05",
    "data4": 702,
  }, {
    "date": "2017-05-07",
    "data4": 940,
  }, {
    "date": "2017-06-09",
    "data4": 940,
  },
];

var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
  if (!dataMap[dataItem.date]) {
    dataMap[dataItem.date] = {};
  }
  Object.keys(dataItem).forEach(function(key) { //assign keys to map
    if (key !== "date") {
      dataMap[dataItem.date][key] = dataItem[key];
      dataMap[dataItem.date].date = dataItem.date;
    }
  });
});

//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
  return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
  newChartData.push(dataMap[date]);
});

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "addClassNames": true,
  "startDuration": 0.4,
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "trendLines": [],
  "applyGapValue": 0,
  "graphs": [{
    "bullet": "round",
    "type": "smoothedLine",
    "valueField": "data2",
  }, {
    "bullet": "round",
    "type": "smoothedLine",
    "valueField": "data1",
  }, {
    "bullet": "round",
    "type": "smoothedLine",
    "valueField": "data3",
  }, {
    "bullet": "round",
    "type": "smoothedLine",
    "valueField": "data4",
  }],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
  }],
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "equalSpacing": true,
    "minorGridEnabled": true,
    "gridPosition": "start",
  },
  "allLabels": [],
  "balloon": {
    "borderThickness": 3,
    "horizontalPadding": 17,
    "offsetX": 50,
    "offsetY": 8
  },
  "chartCursor": {
    "cursorAlpha": 0,
    "cursorPosition": "mouse",
    "graphBulletSize": 1,
    "zoomable": false
  },
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "position": "top",
  },

  "dataProvider": newChartData
});
＆＃13; 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  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="chartdiv"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题