Highcharts синхронизируют селектор диапазона и навигатор на 3 графиках - PullRequest
0 голосов
/ 24 сентября 2018

Я хочу синхронизировать навигатор и селектор диапазона на моих 3 графиках.

В настоящее время у меня есть навигатор внизу последнего графика и селектор диапазона вверху первого графика.Однако они все еще только контролируют свою связанную диаграмму и не синхронизируются с другими.

Пожалуйста, смотрите мою скрипку: http://jsfiddle.net/gdf0swa9/

var options = {
                                        "chart": {
                                            "type": "line",
                                            "polar": false,
                                            "zoomType": "x",
                                            "inverted": false
                                        },
                                        "rangeSelector": {
                                            "enabled": true
                                        },
                                        "navigator": {
                                            "enabled": false
                                        },
                                        "scrollbar": {
                                            "enabled": false
                                        },
                                        "title": {
                                            "text": "Peak",
                                            "align": "left",
                                            "floating": false
                                        },

                                        "subtitle": {
                                            "text": " "
                                        },

                                        "series": [{
                                            "name": "Peak",
                                            "turboThreshold": 0,
                                            "color": "#FF0000",
                                            "threshold": 14,
                                            "type": "line",
                                            "dashStyle": "Solid",
                                            "negativeColor": "#ffee58",
                                            "colorByPoint": false,
                                            "visible": true
                                        }, {
                                            "name": "Minimum",
                                            "type": "line",
                                            "color": "#f44336",
                                            "dashStyle": "ShortDash",
                                            "visible": false
                                        }, {
                                            "name": "Maximum",
                                            "dashStyle": "LongDash",
                                            "type": "line",
                                            "color": "#f44336",
                                            "visible": false
                                        }, {
                                            "name": "Threshold",
                                            "type": "line",
                                            "color": "#f50057",
                                            "visible": false
                                        }, {
                                            "name": "Location Temperature",
                                            "visible": false
                                        }],
                                        "data": {
                                            "csv": "\"Movement\";\"Peak\";\"Minimum\";\"Maximum\";\"Threshold\";\"Location Temperature\"\n1;12.87;12;15;14;20\n2;16;12;15;14;23\n3;12.92;12;15;14;22\n4;13.14;12;15;14;25\n5;12.88;12;15;14;24\n6;13.03;12;15;14;23\n7;12.76;12;15;14;20\n8;16;12;15;14;22\n9;12.72;12;15;14;20\n10;13.2;12;15;14;24",
                                            "googleSpreadsheetKey": false,
                                            "googleSpreadsheetWorksheet": false
                                        },

                                        "pane": {
                                            "background": []
                                        },
                                        "responsive": {
                                            "rules": []
                                        },
                                        "yAxis": [{
                                            "title": {
                                                "text": "(V)"
                                            }
                                        }],
                                        "xAxis": [{
                                            "plotBands": [{}]
                                        }],
                                        "plotOptions": {
                                            "series": {
                                                "dataLabels": {
                                                    "enabled": false
                                                }
                                            }
                                        },
                                        "legend": {
                                            "layout": "vertical",
                                            "enabled": false,
                                            "align": "center",
                                            "floating": false
                                        },
                                        "annotations": [{}],
                                        "tooltip": {
                                            "shared": false
                                        },
                                        "credits": {
                                            "text": " ",
                                            "enabled": false
                                        },
                                        "accessibility": {
                                            "describeSingleSeries": false
                                        }
                                    };
                                    new Highcharts.StockChart("highcharts-67f948af-71a4-4556-ad25-ec142f0f406f", options);
                                }
                            }
                        })();

1 Ответ

0 голосов
/ 24 сентября 2018

Вы можете использовать событие afterSetExtremes и установить правильные крайние значения xAxis для других графиков:

events: {
    afterSetExtremes: function(e) {
        for (var i = 0; i < 2; i++) {
            Highcharts.charts[i].xAxis[0].setExtremes(e.min, e.max, true, false);
        }
    }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/gyt5pjc7/

Справочник по API: https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...