Может ли серийный график amCharts3 иметь определенный набор оси X? - PullRequest
0 голосов
/ 21 июня 2019

Я создаю серийный график amCharts3 для отображения почасового, прогнозного и целевого уровней производства за 24-часовой период (от полуночи до полуночи).Почасовые и прогнозные данные регистрируются каждые 30 минут, после чего они отображаются в виде маркеров на графике.Целевые данные - это статическое значение, которое представлено линией на графике

Мой код для диаграммы:

                        "type": "serial",
                        "backgroundAlpha": 1,
                        "plotAreaFillAlphas": 1,
                        "autoMargin": true,
                        "autoMarginOffset": 30,
                        "autoDisplay": true,
                        "marginRight": 50,
                        "color": "#000000",
                        "plotAreaFillColors": scope.config.plotAreaFillColor,
                        "creditsPosition": "bottom-right",
                        "titles": createArrayOfChartTitles(),
                        "fontSize": 11,
                        "pathToImages": "Scripts/app/editor/symbols/ext/images/",
                        "categoryAxis": {
                            "parseDates": true,
                            "minPeriod": "ss",
                            "axisAlpha": 1,
                            "axisColor": "black",
                            "gridAlpha": 0.1,
                            "autoWrap": true,
                            "gridThickness": 2,
                            "title": "Time, hrs"
                        },
                        "chartScrollbar": {
                            "enabled": false
                        },
                        "legend": {
                            "enabled": true,
                            "useGraphSettings": true,
                            "color": "#000000",
                            "labelText": "[[title]]",
                        },
                        "valueAxes": [
                            {
                                "title": "Temperature",
                                "inside": false,
                                "axisAlpha": 1,
                                "axisColor": "black",
                                "fillAlpha": 0.05,
                                "gridAlpha": 0.1,
                                "gridThickness": 2
                            }
                        ],
                        "graphs": [
                            {
                                "id": "g1",
                                "title": graph1Label,
                                "type": "line",
                                "bullet": "square",
                                "lineThickness": 0,
                                "bulletColor": "#0094FF",
                                "balloonColor": "#0094FF",
                                "balloonText": "[[timestamp]]<br />[[value1]]", 
                                "valueField": "value1"
                            },
                            {
                                "id": "g2",
                                "title": graph2Label,
                                "type": "line",
                                "bullet": "round",
                                "lineThickness": 0,
                                "bulletColor": "#FF8000",
                                "balloonColor": "#FF8000",
                                "balloonText": "[[timestamp]]<br />[[value2]]", 
                                "valueField": "value2"
                            },
                            {
                                "id": "g3",
                                "title": graph3Label,
                                "type": "line",
                                "lineThickness": 1,
                                "lineColor": "#FF0000",
                                "balloonColor": "#FF0000",
                                "balloonText": "[[timestamp]]<br />[[value3]]", 
                                "valueField": "value3"
                            }
                        ],
                        "dataProvider": dataArray,
                        "categoryField": "timestamp",
                        "chartCursor": { 
                            "cursorColor": "gray",
                            "valueLineBalloonEnabled": true,
                            "valueLineEnabled": true,
                            "valueZoomable": true,
                            "categoryBalloonDateFormat": "D/MM/YYYY L:NN:SS A"
                        },
                        "zoomOutButtonImage": ""
                    }

Данные отображаются правильно, но я пытаюсь установить x-диапазон оси до определенной начальной и конечной точки.

Я хочу, чтобы график отображался с осью х, установленной с полуночи до полуночи.Даже если сейчас 10 часов утра, я бы хотел, чтобы график отображал весь 24-часовой диапазон времени.

В настоящее время на графике отображаются данные с полуночи до текущего времени, когда он просматривается.Например, с полуночи до 10 часов утра.

Я добавил изображения для того, как выглядит дисплей в настоящее время, а также для желаемого результата.

Текущий дисплей

Желаемый дисплей

1 Ответ

0 голосов
/ 25 июня 2019

Мне удалось решить эту проблему с помощью плагина для заполнения даты, предоставленного amCharts.

Плагин для заполнения даты

...