iT邦幫忙

0

Highcharts 多圖同步

ddx 2022-01-14 16:37:511311 瀏覽

如果你的圖有兩條線以上,又要跟其他圖同步的話



['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
                                document.getElementById('container' + i).addEventListener(
                                    eventType,
                                    function (e) {
                                        var chart,
                                            point,
                                            i,
                                            event;
                                        for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                                            chart = Highcharts.charts[i];
                                            // Find coordinates within the chart

                                            event = chart.pointer.normalize(e);
                                            // Get the hovered point
                                            point = chart.series[0].searchPoint(event, true);
                                            if (point) {
                                                point.highlight(e);
                                            }
                                        }
                                    }
                                );
                            });

                            Highcharts.Pointer.prototype.reset = function () {
                                return undefined;
                            };


                            Highcharts.Point.prototype.highlight = function (event) {
                                event = this.series.chart.pointer.normalize(event);
                                this.onMouseOver(); // Show the hover marker
//這一段拿掉就正常了 this.series.chart.tooltip.refresh(this); // Show the tooltip
                                this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
                            };

                            function syncExtremes(e) {
                                var thisChart = this.chart;
                                if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
                                    Highcharts.each(Highcharts.charts, function (chart) {
                                        if (chart !== thisChart) {
                                            if (chart.xAxis[0].setExtremes) { // It is null while updating
                                                chart.xAxis[0].setExtremes(
                                                    e.min,
                                                    e.max,
                                                    undefined,
                                                    false,
                                                    { trigger: 'syncExtremes' }
                                                );
                                            }
                                        }
                                    });
                                }
                            };

排版有點亂抱歉....

很歡迎把問題留下或著分享解決方法喔
在這裏最差的表現。就是將問題拿掉說「沒問題了」
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答