Chart.js:在多个图表上同步缩放和PAN

时间:2019-05-20 17:24:36

标签: javascript charts chartjs-plugin-zoom

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中分配数据并设置选项。

0 个答案:

没有答案