Chart.js: синхронизированное масштабирование и панорамирование на нескольких графиках - PullRequest
0 голосов
/ 20 мая 2019

На странице пути есть несколько графиков от Chart.js. Каждый график способен индивидуально масштабировать и панорамировать.

Хотя я хочу сделать синхронное масштабирование и панорамирование. То есть, когда один график увеличен, другие графики также синхронизированы с увеличением.

Кто знает решение?

       function bindData(parameter, divID) {

            let tmp = [];
            let myData = [];

            for (let i = 0; i < dataset.length; i++) {
                myData[i] = [];
                tmp = dataset[i];

                for (let j = 0; j < tmp.length; j++) {
                    if (tmp[j][parameter]) {
                        let obj = {};
                        if (tmp[j].device == deviceID[i]) {
                            var m = moment(tmp[j].logtime, "YYYY-MM-DDTHH:mm:ssZ");
                            obj["x"] = m.format("YYYY-MM-DD HH:mm:ss");
                            obj["y"] = tmp[j][parameter];
                            myData[i].push(obj);
                        }
                    }
                }
            }
            drawLineChart(myData, divID);
        }

        function multipleData(data){
            var array=[];

            console.log("data.length:"+ data.length);
            for(var i=0; i< data.length; i++){
                array[i]=[];
                var obj = {}
                obj.label="DATA"+i;
                obj.data=data[i];

                array[i]=obj;
            }
            return array;
        }


        // --------------------------------------------
        function drawLineChart(mydata, divID) {
            var ctx = document.getElementById(divID).getContext("2d");
            var myChart = new Chart(ctx, {
                type: 'line', 
                data: {
                    datasets: multipleData(mydata)
                },
                options: {
                     responsive: true,
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                displayFormat: 'h:mm',
                            }
                        }]
                    },
                     pan: {
                        enabled: true,
                        mode: 'x'
                    },
                    zoom: {
                        enabled: true,
                        mode: 'x',
                    }
                },

            });
        }

Приведенный выше код является частью исходного кода. bindData вызывается для установки данных, а drawLineChart рисуется. В это время назначьте данные и настройте параметры в multipleData.

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