Временные ряды amChart с пробелами и сложены - PullRequest
0 голосов
/ 05 апреля 2019

Я хочу отобразить диаграмму с двумя линейными графиками, представляющими собой временные ряды с пробелами в данных. Я включил "categoryAxis": {"parseDates": true,} и убедился, что мои данные отсортированы по возрастанию.

Я сгенерировал несколько фиктивных данных с верхней диаграммой только с датой , которая работает, как и ожидалось. Дублируя данные и график, я изменил 2-й график дата-время , чтобы вторая строка была на 30 минут позже. Согласно демоверсии , все, что мне нужно сделать, это включить "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>
...