具有间隔和堆积的amChart时间序列

Question

我想显示一个带有两个折线图的图表，这些折线图是一个具有数据间隔的时间序列。我已启用"categoryAxis": {"parseDates": true,}，并确保我的数据按日期升序排列。

我已经生成了一些虚拟数据，其中顶部图表仅日期可以正常工作。复制数据和图表，我修改了第二张图表日期时间，以便第二行在30分钟之后。 According to the demo，我所要做的就是启用"categoryAxis": {"minPeriod":"mm"}和chart.dataDateFormat: "YYYY-MM-DDTHH:NN:SS.QQQZ"，但这会破坏图表。

关于我所缺少的东西有什么想法吗？

var chartDateOnly = AmCharts.makeChart("date-only", {
    "type": "serial",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true,
        "stackType":"regular",
    }],
    "graphs": [{
        "id": "g1",
        "connect": false,
        "lineThickness": 2,
        "title": "red line",
        "valueField": "value",
        "valueAxis":"v1",
    },
    {
        "id": "g2",
        "connect": false,
        "lineThickness": 2,
        "title": "blue line",
        "valueField": "value2",
        "valueAxis":"v1",
    }],
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
    },
    "dataProvider": [{
        "date": "2012-07-29T10:00:00.000Z",
        "value": 15,
        "value2":null,
    }, {
        "date": "2012-07-30T10:00:00.000Z",
        "value": 26,
        "value2":null,
    }, {
        "date": "2012-07-31T10:00:00.000Z",
        "value": 18,
        "value2":null,
    }, {
        "date": "2012-08-01T10:00:00.000Z",
        "value": null,
        "value2": 50,
    }, {
        "date": "2012-08-02T10:00:00.000Z",
        "value": null,
        "value2":55,
    }, {
        "date": "2012-08-03T10:00:00.000Z",
        "value": null,
        "value2": 70,
    }, {
        "date": "2012-08-04T10:00:00.000Z",
        "value": 20,
        "value2":null,
    }, {
        "date": "2012-08-05T10:00:00.000Z",
        "value": 17,
        "value2":null,
    }]
});
    
var chartDateTime = AmCharts.makeChart("date-time", {
    "type": "serial",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "dataDateFormat": "YYYY-MM-DDTHH:NN:SS.QQQZ", // Specify time format
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true,
        "stackType":"regular",
    }],
    "graphs": [{
        "id": "g1",
        "connect": false,
        "lineThickness": 2,
        "title": "red line",
        "valueField": "value",
        "valueAxis":"v1",
    },
    {
        "id": "g2",
        "connect": false,
        "lineThickness": 2,
        "title": "blue line",
        "valueField": "value2",
        "valueAxis":"v1",
    }],
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm", // specify minutes
    },
    "dataProvider": [{
        "date": "2012-07-29T10:00:00.000Z",
        "value": 15,
        "value2":null,
    }, {
        "date": "2012-07-30T10:00:00.000Z",
        "value": 26,
        "value2":null,
    }, {
        "date": "2012-07-31T10:00:00.000Z",
        "value": 18,
        "value2":null,
    }, {
        "date": "2012-08-01T10:30:00.000Z",
        "value": null,
        "value2": 50,
    }, {
        "date": "2012-08-02T10:30:00.000Z",
        "value": null,
        "value2":55,
    }, {
        "date": "2012-08-03T10:30:00.000Z",
        "value": null,
        "value2": 70,
    }, {
        "date": "2012-08-04T10:00:00.000Z",
        "value": 20,
        "value2":null,
    }, {
        "date": "2012-08-05T10:00:00.000Z",
        "value": 17,
        "value2":null,
    }]
});

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- HTML -->
<div id="date-only" style="width:100%;height:500px;"></div>
<div id="date-time" style="width:100%;height:500px;"></div>