首页 > 解决方案 > 单击 Highchards 图例时如何保持在 WEB 页面的同一位置?

问题描述

我是 JavaScript 的初学者并使用 Highchard 库.... 对于个人项目,我构建了一个动态 WEB 页面(使用 PHP),该页面在彼此下生成多个图形。

除了当我单击最后一个图表中的图例以使曲线消失时,我的页面会上升并且不会停留在原来的位置。

我尝试在我的 HTML 代码中插入带有“#”标签的锚点并运行命令“window.location.href = URL +”#anchorDEVICES”;” 在 plotOptions/events 元素中,但页面未加载到 URL 后跟“#”锚点。

我在同一部分中使用 JavaScript 命令“window.scrollTo(0, 750)”尝试了另一种方法,但我的页面仍然没有转到我单击的图表。

当您单击最后一个图表的图例时,是否有人对使用数学方法来避免页面上升有任何想法?

非常感谢您,

蒂埃里

通过 www.DeepL.com/Translator 翻译

      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function () {
                location.href = this.options.url;
              }
            }
          },

          events: {
            legendItemClick: function() {         // Fonction pour faire revenir la page au niveau de l'ancre de ce graphique
              console.log("on a cliqué sur " + this.name + " (index du texte : " + this.index + ") du graphique SwapPage");

              var uri = location.href;
              console.log("URL = " + uri);
              var uriAll = uri.split('#');
              console.log("URL trouvée = " + uriAll[0] );
              //window.location.href = uriAll[0] + "#ancreDEVICES";
              window.scrollTo(0, 1500);
            }
          }

        }
      },

“window.scrollTo”或“window.location.href = uriAll[0]+'#ancreDEVICES'”不要把页面放在好的图形上......我只会找到一个解决方案,以便留在同一个地方当我单击 Highcharts 图形的图例时的网页。

标签: javascripthighcharts

解决方案


推荐阅读