单击Shield UI JavaScript饼图后，将参数传递到新窗口

Passing arguments to a new window after click on a Shield UI JavaScript pie chart

本文关键字：新窗口 参数传递 窗口 UI Shield JavaScript 单击      更新时间：2023-09-26

我在网页上使用的是Shield UI JavaScript图表。图表的当前类型为饼图。我需要的是在用户点击一块饼后为他们提供更多的数据。数据将在一个单独的窗口中提供，我还需要在打开的文档的URL中传递一些参数。我尝试了一些技巧；然而，它们都没有正常工作。我使用pointSelect事件

            events: {
                pointSelect: function(args) {
                }
            },

但是在这一点上我被卡住了。将感谢任何帮助。

如果使用window.open打开窗口，则可以在之后引用该窗口：

var w = window.open("http://www.google.com/", "popup");
// wait for the window to load and then so something
w.onload = function(){
    w.doSomething();
};

请参阅https://developer.mozilla.org/en-US/docs/Web/API/window.open

如果你只需要传递一些参数，你也可以使用location.hash，例如，链接到page.html#/some/variables/here，然后拆分location.hash，等等。

事实上这很简单。这里有pointSelect事件的可用参数列表：https://www.shieldui.com/documentation/javascript.chart/events/pointSelect让我们来学习args.point.x参数。这是切片的编号，从第一个开始。我们可以使用一组链接，也可以将参数的值分配给链接——这主要是一个选择问题。例如，您可以使用以下代码：

            events: {
                pointSelect: function(args) {
                    var URL="http://www.url.com/?parameterA="+args.point.x;
                    var WindowName="Details"+args.point.x;
                    window.open(URL, WindowName, "height=200,width=200");
                }
            },

由于您提到的是一个新窗口，而不是选项卡，因此我添加了窗口尺寸的值，因此它实际上显示为一个新的窗口，而非选项卡。有一个重要的细节。你需要为每个切片显示一个单独的窗口吗？所以你需要更改它的名称：

var WindowName="Details"+args.point.x;

或者你可以使用一个窗口，如果保持打开状态，一旦用户点击另一个选项卡，就会显示下一个数据：

var WindowName="Details";
相关文章：